読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

デバッグ用CSS「Diagnostic Styling」とそのサンプルコード

翻訳 Web標準

CSSを使って開発中のHTMLのデバッグを行ってしまうという考え方の紹介とそのサンプルコードをメモしておきます。

デバッグCSSとは何か。

まず、サンプルのコードを示してみます。

img[alt=""] {border: 3px dotted red;} 
img[title=""] {outline: 3px dotted fuchsia;} 

img要素に続くのは属性セレクタ(属性セレクタについてはCSS セレクタに関するおさらい | WWW WATCHが詳しいので、そちらを参考に)。alt=""とtitle=""の属性と値を持つimg要素にマッチし、それぞれのスタイルを与えます。こうしておくと、HTML内に空白のalt属性やtitle属性があれば、指定されたスタイルが適用されるになり、空白であることが分かるわけです。
もう1つサンプルとして、こんなのはどうでしょうか。

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

a要素の中にhref属性。#、もしくは空白時に背景色を与えます。
サイト制作時にサイト構造がまだ決まっていなくて、各ページへのリンク先が分からない場合は空白や#にすることってありますよね。でも、それをそのまま忘れてしまっていると、イタイことになってしまいます。そのためにこんなコードを仕込んでおくと、コードの書き忘れの備忘録にはなりそうです。
上記のサンプルとデバッグCSS - Diagnostic StylingはEric Meyer氏が提唱しているものです。詳しくは、

を参考にしてください。

デバッグCSSのメリットなど。

確かにこれと同じようなことはFirefoxWeb Developer Toolbarなどでも可能です。ただし、Eric氏によると、このCSSのメリットは2点あるとのこと。

  1. 自分自身でCSSを書くことにより、どんなエラーにどんなスタイルを与えるのか、自分で定義できること。
  2. サイト開発時のデバッグを1つのCSSに集約させることができるようになり、効率化につながること。

確かに、それは一理あります。これらのデバッグはほかのツールでも同様に可能なのですが、自分のCSSセットの中に入れておくことにより、簡易的なチェックツールとしての用途は果たせそうな気がします。
あとは何を書くか、ですね。属性セレクタについてのよい勉強にもなりそうに思います。