CSSを簡単にデバッグする方法

outlineプロパティを使って、該当する要素に枠線を付けるというものです。HTMLの構造を確認したい場合に有効な方法です。outlineプロパティはIE6・7では使えないので、確認したい場合は、IE8やFirefox・Safariなどで行ってください。

枠線を表示するスタイルシート

 
* { 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; }
 

→デバッグしたサンプル

最近はFirefoxのアドオンとかで確認できるので、使う機会が少ないかもしれませんね。