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のアドオンとかで確認できるので、使う機会が少ないかもしれませんね。

TRACKBACK URL トラックバック用URL

COMMENT LIST

POST YOUR COMMENT

送信内容
vericode

おすすめCSSサイト

あわせて読みたいブログパーツ

TopPageへ

更新情報RSSアイコン

閉じる