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を実装

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

• CSSIE8における拡大縮小バグ
• CSSCSSを自動でIE6に対応させるオンラインサービス「ie6fixer」
• CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
• CSS設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」
• CSS強制的にCSSを適用させる!importantハック
• CSSレスポンシブWebデザインについて

「CSS」の他の記事を読む

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