CSSのデバッグ方法
CSS2009年1月19日
「どうしてもCSSでのレイアウトがうまくいかない！」
そんな時は下記の方法を試してみてください。きっと糸口がつかめるはずです。
ソースを削除してみる
根本的にマークアップが間違っていたりすることがあります。
(divが足りない、閉じタグがない、など)
パスをチェックしよう
CSSファイルや、CSSファイルの中で指定されている背景画像などのパスはあっていますか？
borderを指定してみよう
その要素がどこからどこまで適用されているのかわかります。
CSSにおけるセレクタの優先順位：widthを指定（hasLayoutをtrueに）する
IEは独自拡張の「hasLayout」という読み取り専用のプロパティを持っています。
- widthを指定する
- heightを指定する
- zoomを指定する
- display: inline-block;を指定する
!importantを指定してみる
もしかしたら他の部分でCSSの指定が上書きされている可能性があります。
!importantをつけたままか、優先度を調整しましょう。
スペルをチェックしよう
手打ちするとよく間違えます。HTMLとCSSは同じスペルですか？
また、削除していくことによって原因の箇所の特定ができます。
ネットで調べてみる
みんな同じことで悩んでいたりするものです。結構使えます。
誰かに聞く
昔同じ問題にぶつかって解決した人がいるかもしれません。
参考サイト
この記事を読んでいる方にオススメの記事
- CSSFirefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御
- CSSbodyにfont-size100.01%を指定
- CSSIE8における拡大縮小バグ
- CSSfont-familyの指定
- CSSCSSのコーディングで陥りがちなミスやトラブル
- CSSfloatを使わずに、横並びのリストを実装
- ※承認制のため、即時には反映されません。
この記事にコメントする