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は同じスペルですか？
また、削除していくことによって原因の箇所の特定ができます。

ネットで調べてみる

みんな同じことで悩んでいたりするものです。結構使えます。

誰かに聞く

昔同じ問題にぶつかって解決した人がいるかもしれません。

参考サイト

• CSSのデバッグ方法 - Webtech Walker

• floatさせた要素を簡単にfloat解除させる「clearFix」
• CSSのみでlightboxを実装

この記事を読んでいる方にオススメの記事

• CSSCSS3でborder（ボーダー）のグラデーションを実現
• CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
• CSS画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS
• CSSCSSを自動でIE6に対応させるオンラインサービス「ie6fixer」
• CSSbodyにfont-size100.01%を指定
• CSSCSSのみでlightboxを実装

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。