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は同じスペルですか？
また、削除していくことによって原因の箇所の特定ができます。
ネットで調べてみる
みんな同じことで悩んでいたりするものです。結構使えます。
誰かに聞く
昔同じ問題にぶつかって解決した人がいるかもしれません。
参考サイト
この記事を読んでいる方にオススメの記事
- CSSbodyにfont-size100.01%を指定
- CSS画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS
- CSS角丸背景を画像1枚で実装
- CSS設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」
- CSSCSSのコーディングで陥りがちなミスやトラブル
- CSSCSS3でborder（ボーダー）のグラデーションを実現
- ※承認制のため、即時には反映されません。
この記事にコメントする