unoh.github.com

CSSをデバッグしよう

2007-05-30 10:56:56 +0000

こんにちは、Sashaです。CSSって、誰でも比較的簡単に始めることが出来るくせに、何年たってもつまらないバグにハマったりするものです。今日は、CSSをデバッグする手順を紹介します。特にCSS初心者の方々に参考にしていただければ光栄です。ただ、ここで紹介しているのは、CSSの問題解決の方法ではありません。CSS上の問題点の原因を、自分で見つけるためにとるべき手段です。見つかった問題点を、どうやって解決するかは、ここでは触れないのでがっかりしないでくださいね。

※以下の手順は、下記のサイトをパクッ・・・、じゃなくて、翻訳しつつ簡単にまとめたものです。
参考: http://www.subcide.com/tutorials/debuggingcss/

まず、問題あるって認めましょう。

見なかったフリをしたい気持ちはよくわかります、が。

人的ミスをつぶそう


Validateしよう

タグの閉じ忘れやquotaitonの閉じ忘れなど、目をシバシバさせて見つけようとしても見つけられなかったしょうもないミス、拾ってくれます。

よくある現象を把握しよう
CSSで頻発するバグは、既にほかの人によって見つけられていることがほとんどです。 問題となっている現象をじっくり把握したら、大体あとはgoogleなんかで解決法が見つかるはずです。その問題が、当然のことですが、ブラウザ限定なものなのか、全ブラウザで共通して起こる現象なのかもチェックしましょう。

継承しているものを把握しよう
問題となっている要素そのものに指定されているスタイルを検証してみても、問題が解決されないとき、十中八九問題は、その要素の親要素以上のレベルにあります。継承されているスタイルを全部検証するには、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のデバッグをしていると、たまに発狂したくなります。だんだん目が画面よりに吸い付いていって、隣に座っている営業の女の子に「ねぇ、こわいよ。」と静かにたしなめられたりします。で、そんなときに外の空気を吸いに行ったりして、戻ってくると、なんか知らないけど問題が解決したり・・・。そんなこと、ありませんか?私には多々あります。問題が不可解に思われれば思われるほど、人はそこに吸いつけられるものです。気がついたらトイレを我慢してたり、息吸うの忘れてたり!お願いです、覚えていてください。行き詰ったら、一呼吸・・・。ふぅ~。


それでは、私も一呼吸入れてきますー。