2007年10月10日

CSSのデバッグ方法

CSSはプログラムみたいに、エラーがあるからといって、動作が止まったりしません。また、CSSのソースにエラーがなくても思うように動作しないことがあります。そういう場合にどうやって原因を突き止めて修正するか、僕なりのやり方を紹介します。

要点はこんな感じ。

borderを指定してみる

背景やborderをしなければ、基本的にボックスは無色透明なので、どこからどこまでが該当するボックスなのか、わからなく場合があります（僕だけ？）。

ボックスの領域を確認するときは下記のようにborderを指定して確認します。僕の場合、目立つように赤線を表示するようにしています。

div#box {
  /* スタイル色々 */
  border: 1px solid #F00;
}

元からborderがある場合は、そのborderで領域はわかります。

指定したスタイルが全く反映されない場合、考えられる原因として、指定したセレクタが間違っている可能性があります。わかりやすいプロパティを指定してみて、変化があるか確かめます。僕はよくdisplay:noneを指定します。（念のため「display:none !important」にすると尚良い）

display:noneを指定しても該当箇所が消えない場合は、セレクタが間違えてる可能性が高いです。

class名やid名の大文字小文字なども正確にあっているか確かめます。「#」や「.」がなかったりclassなのに「#」をつけてることも考えられます。

一部のプロパティの値が反映されないという場合、他の部分で上書きされている場合があります。その場合は「!important」をつけてみましょう。

div#box {
  width: 300px !important;
}

これで表示されれば優先度を調整しましょう。

IEは独自拡張の「hasLayout」という読み取り専用のプロパティを持っています。どうやらこれが多くのバグの原因らしいです。hasLayoutプロパティはオブジェクトがレイアウトを持っているかどうかを示すもので、これがfalseだと様々なバグを引き起こすようです。

hasLayoutををtrueにするには以下のようなプロパティに値を指定します。

これを知る前は、IEで崩れたらボックスにwidthを指定すれば直ることが多いなぁと思っていたんですが、よくよく考えるとこれが原因だったんです。その影響もあってか、今でもIEで崩れると、とりあえずwidthを指定してみることが多いです。

IE6だけ表示がおかしい場合は互換モードのバグの可能性もあります。IE6はxml宣言をつけると互換モードでレンダリングします。互換モードのバグっぽいなぁと思ったら一度xml宣言を外してみて互換モードによるバグなのか、そうでないのか確かめてみます。

ちなみに互換モードになって一番やっかいなのが幅と高さの算出のバグです。このバグは、widthやheightにpaddingやborderのサイズを含めてしまうというものです。そのせいでボックスの幅や高さが他のブラウザと比べて小さくなるときがあります。

対応としてはwidthやheightと同時にborderやpaddingを指定しないということです。

他にもいろいろケースでどうしても思いどおりに表示されないことが多々あります。そういう時に僕がよくやるのはどこに原因があるか調べるために(X)HTMLやCSSの原因と思われるコードを削除していくという方法です。

で、コードを削除して直ったら、削除した箇所に問題があるということです。該当箇所を修正してやりましょう。これは結構使えます。

いろいろやってみたけど原因がわからない場合はgoogleなり何なりで検索してみましょう。結構対処方法が見つかったりします。また、コミュニティサイトなど質問して人に聞いてみるのもいいかもしれません。