デバックに使える(X)HTMLの構造をアウトライン化することができるCSS[CSS]

Chris Page's Weblog of Doomより、デバックに使える(X)HTMLの構造をアウトライン化することができるCSSの紹介です。

FirefoxのアドオンのWeb developerでブロックレベルの要素をアウトライン化させることができますが、それと同じ効果をだすことのできるCSSです。

  * { outline: 2px dotted red }
  * * { outline: 2px dotted green }
  * * * { outline: 2px dotted orange }
  * * * * { outline: 2px dotted blue }
  * * * * * { outline: 1px solid red }
  * * * * * * { outline: 1px solid green }
  * * * * * * * { outline: 1px solid orange }
  * * * * * * * * { outline: 1px solid blue }

上記のスタイルを適用させると、当ブログは下記図のようになりました。

css0908081.jpg

視覚的に構造がわかるのが特徴です。