Webtech Walker

CSSのデバッグ方法

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

要点はこんな感じ。

  • borderを指定してみる
  • display:noneを指定してみる
  • !importantを指定してみる
  • xml宣言を取ってみる(IE6で標準モードにする)
  • widthを指定してみる(hasLayoutをtrueにする)
  • ソースを削除してみる
  • ネットで調べてみる

borderを指定してみる

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

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

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

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

display:noneを指定してみる

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

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

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

!importantを指定してみる

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

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

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

widthを指定してみる(hasLayoutをtrueにする)

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

ウノウラボ by Zynga Japan: hasLayoutとは何か

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

プロパティ
display inline-block
height any value
float left or right
position absolute
width any value
writing-mode tb-rl
zoom any value

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

xml宣言を取ってみる(IE6で標準モードにする)

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

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

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

ソースを削除してみる

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

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

ネットで調べてみる

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

このエントリーをはてなブックマークに追加