※以下の手順は、下記のサイトをパクッ･･･、じゃなくて、翻訳しつつ簡単にまとめたものです。
参考: http://www.subcide.com/tutorials/debuggingcss/
まず、問題あるって認めましょう。
見なかったフリをしたい気持ちはよくわかります、が。
人的ミスをつぶそう
- スペルをチェックしよう
-
HTMLとCSSとで、スペルは一致していますか？
- パスをチェックしよう
-
CSSファイルや、CSSファイルの中で指定されている背景画像などのパスは、適切ですか？
- 大文字・小文字をチェックしよう
-
#myAwsomeID と #myawesomeidは、CSSでは異なったIDとして扱われます。
Validateしよう
タグの閉じ忘れやquotaitonの閉じ忘れなど、目をシバシバさせて見つけようとしても見つけられなかったしょうもないミス、拾ってくれます。
よくある現象を把握しよう
CSSで頻発するバグは、既にほかの人によって見つけられていることがほとんどです。
- floatされた同士のdivで3pxの隙間、開いてる？
- ブロックの横幅が思うようにならない？
- border-leftのあるブロックを何度も繰り返すとちょっとずつずれていく？
継承しているものを把握しよう
問題となっている要素そのものに指定されているスタイルを検証してみても、問題が解決されないとき、十中八九問題は、その要素の親要素以上のレベルにあります。継承されているスタイルを全部検証するには、Firefoxの拡張、Fire Bug が超便利です。要素に継承される全てのスタイル定義を、ズラーっと順番に並べてくれる上、例えばその要素のfont-size指定が、親要素のfont-size指定を上書きしている場合は、親要素のfont-sizeには打ち消し線を入れてくれます。CSSの一つ一つの定義をon/offできる上、その場でCSSを編集して試せたりもします。んー、手放せない一品です。
測ってみよう
ズレいているならズレの幅を、隙間が生じているなら隙間の幅、横幅縦幅がブラウザ間で違うなら、その差を、とにもかくにも測ってみましょう。測るのには、やっぱりものさし。Web Developer （Firefoxの拡張）や、IE Developer Toolbar のような開発者、デザイナー向けのツールにもものさしはありますが、さっき山岡さんに教えてもらったものさしツール が便利そうです。ピクセル単位できれいにそろっているか、チェックするのに便利です。そして、そのズレや隙間や幅の違いが、どこから来ているものなのかCSSで捜索です。たとえば、隙間が15pxだったら、marginとpaddingを足したら15pxになるのかもしれないし、二つ並んでいるdivのmargin-leftとmargin-rightの合計が、15pxなのかもしれない。どこかで指定したborderの幅かもしれませんし、IEのバグを踏んでいるのかもしれません。数字が与えてくれるヒントは、結構ありますよ！
Doctypeを確認しよう
適切なDoctypeを使っていますか？CSSは、Doctypeにしたがって解釈されるので、誤ったDoctypeを使用していたりDoctypeをまったく使用していなかったりすると、CSSのデバッグは、バスケのルールを参照して、サッカーの審判をしているようなもんです（んあ？）。
参考: http://hxxk.jp/2006/12/19/2100
問題を隔離しよう
もし、それでも問題が解決されなかったら、大胆な行動に出るべし。CSSやHTMLを少しずつ、削っていきましょう。削ってはリフレッシュ！削ってはリフレッシュ！こうして、問題が再現しないところまで来たら、フフフ、そこなんですね。
人の助けを借りよう
フォーラム、コミュニティ、リアルな人の輪、ネットで働く人間だったら駆使できるはず。活発なコミュニティだったら、即効返事が返ってきますよ。その際、気をつけることは、『上記の全てを検証したうえで』、どのブラウザ、どのDoctypeでそのようなバグが出ているのかをなるべく具体的に記述すること。何がどこで問題となっているか、を明確にせずに質問しようとしても、忙しいプロはなかなか救いの手を差し伸べてくれようとはしてくれません。「問題を隔離」して、問題が出ている箇所と、問題に影響を与えているかもしれない親要素と、そのそれぞれに指定されているスタイルも、忘れずに記述しましょう。
「オマケ」息抜きしよう
CSSのデバッグをしていると、たまに発狂したくなります。だんだん目が画面よりに吸い付いていって、隣に座っている営業の女の子に「ねぇ、こわいよ。」と静かにたしなめられたりします。で、そんなときに外の空気を吸いに行ったりして、戻ってくると、なんか知らないけど問題が解決したり・・・。そんなこと、ありませんか？私には多々あります。問題が不可解に思われれば思われるほど、人はそこに吸いつけられるものです。気がついたらトイレを我慢してたり、息吸うの忘れてたり！お願いです、覚えていてください。行き詰ったら、一呼吸・・・。ふぅ～。
それでは、私も一呼吸入れてきますー。