CSS Radar

CSS デバッグワークフロー

CSSに限らずだが(CSSはプログラミング言語ではないが)、デバッグするためには問題を発見しなければならない。
そういう意味ではCSSでのデバッグは比較的簡単かもしれない。

対象ブラウザでのアウトプットがコーディングした通りであるかどうか？
それだけのことでバグを発見することができる。

では、デバッグの後半パート、修正するための必須ワークフローを紹介しよう。

ステップ1 - HTML、CSSのソースコードの検証(バリデート)

HTMLソースの検証では、"Box Model - IE6 と IE7"で紹介したDOCTYPE宣言などに注意しつつ、初歩的なタグの閉じ忘れ、属性(attribute)のクォート(”"か”)閉じ忘れなど、そもそものHTMLでのミスを確認する必要がある。
CSSソースの検証も同様だ。

きっとIEバグが原因だ、と思い込むことが非常に多いので欠かすことのできないステップ

ステップ2 - デバッグ
忘れてはいけないのは、デバッグするためにはバグを見つけ出す必要がある。
CSS、HTMLともに、バグだけが残るようにソースコードを改変するという手法が基本。
具体的には、

というようなフローでバグのあぶり出しをする。

CSSの場合、IE、Firefox、Safariなど対応するべく環境が複数個存在するため、
まずはFirefoxからスタートすることをオススメする。
比較的バグの少ないブラウザからデバッグしていくほうが、ブラウザ固有のバグを見つけ出しやすくなる上、
対処も楽にできるからだ。

ステップ3 - デバッグツール
このステップまでにはバグは限りなく少なくなっていることだろう。
実際には、ステップ2とステップ3には明確な境界はなく、デバッグツールを使いながら、ステップ2を行うことが多いだろう。
では、ブラウザごとにデバッグツールを紹介しよう。

Firebug　CSSデバッグにおいてFirebugほど革命的なアプリケーションは存在しない。ボックスモデルのビジュアルフィードバックや適応されているCSSの指定の確認などができる。とくにCSSの指定のうち、よくバグとなる継承している指定も確認できるのが便利
Web Developer　こちらもFireFoxのアドオン。FireFoxから直接バリデートなど行えたり、ブロック要素のアウトラインを確認できたりできる
DebugBar　IE環境に置いてのFirebugとほぼ同期能を提供しているDebugBar。日本語にも対応しており、IEでのデバッグに欠かせない
CSS Debug Toggle　IEで利用できるブックマークレット。FirefoxのWebDeveloperの機能のうち、ブロック要素のアウトラインをID名、Class名とともに確認できる
XRAY　IE6以上、FireFoxでも動作するブックマークレット、こちらはクリックした箇所のブロック要素に含まれる指定を確認できる

Safariでのデバッグツールについてはマックユーザではないので、紹介できないが、Safariにはデフォルトでデバッグツールが備わっているということなので、調べてみてほしい。

かなり駆け足でCSSデバッグのフローについて紹介した。
近いうちに、各デバックツールの利用方法なども紹介するつもりだ。