CSS

CSS

フルスクリーン仕様なのにie11で横スクロールバーが出てしまった

フルスクリーン仕様にしたCSSなのにie11だけ横スクロールバーが出てしまった件。 疑わしい要素を一個づつ削除して調べていくと原因は と設定しているブロックだと特定出来た。 いわゆる真ん中寄せの設定がしてある。 実際...
CSS

footer下の謎の隙間、リサイズして横スクロールした時の右側の謎の隙間

一番したまでスクロールした時にフッター下に謎の隙間が出来る問題。 子要素のmargin-bottomが関係していると思う。 フッター下に子要素のmargin-bottom領域がはみ出している。 ブラウザを小さくリサイズして、横...
CSS

fixedされたメニューにした場合、アンカー先がずれる問題

fixedされたメニューにした場合、アンカーで移動した場合、コンテンツはfixedされたメニューの裏側に入ってしまう。 つまりメニューの高さ分コンテンツの頭が隠れる。 いままで、jqueryで調整していたが、簡単な方法があった。 ...
CSS

画像の下に隙間が出来る問題

画像の下に隙間が出来る問題の対策 img{ vertical-align: bottom;} 参考にさせてこらったのはこちら。
CSS

css flexスマフォ対応

display flex属性 ios7,android2,android4 このようにしてみたが、ネックはflex-wrapで、アンドロイド標準ブラウザだけ効かなかった。 つまり横1列に並んでしまう状態。 とりあえず、dis...
CSS

table width:100%にしていても拡張されてしまう問題

table width:100%、overflow:hiddenにしていても内容物が大きいと拡張されてしまう問題。 table-layout: fixed;を使う。解決!
CSS

css3 calc

計算式を可能にしてくれるcalc()ファンクション。 ios7 Android4.4 以降に対応。 width: calc(50% - 3px); 横幅50%から3pxマイナスしてくれる。 参考
CSS

cssでテーブルレイアウト多段組

cssでテーブルレイアウトをする。 display:table display:table-cell を使う。 すべて横1行に並んでしまうので、メニューにしか使えない。 きれいに多段組にするには、 display: ...
CSS

lightboxのz値

lightboxのオーバーレイ(.lightboxOverlay)とアイテムが乗る(.lightbox) z値は9999と10000で設定してある。 これだとwebkit系(スマフォ、サファリ)などでは、コンテンツの裏に配置されてし...
CSS

display:table display:table-cell

display:tableとdisplay:table-cellを使うとcssの設定で動的にテーブルレイアウトが出来る。 逆にtableをバラして使うにはdisplay:block,inlineその他を使えばいい。