前の記事 ≪:グレーアウト表示ライブラリ:glayer.js
次の記事 ≫:デザイナーのためのPHPビデオチュートリアル

デバッグ用CSSのスニペット

2006年08月09日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
A Handy CSS Debugging Snippet
I use the following bit of CSS to help visualize the structure of an XHTML (or HTML) document by putting a colored outline around the border of every element. At each level in the hierarchy the color changes so you can see when “depth” changes.

デバッグ用CSSのスニペット。
このCSSを定義しておくことで、階層的な構造を視覚的に次のように表示できます。



次がそのデバッグ用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 }

HTML構造が複雑になっても分かりやすく表示できて便利ですね。

関連のFirefox拡張
-Firebug
-WebDeveloper

情報元
Sooey - CSSデバッグ用Snippet

関連の記事検索:CSS, デバッグ
スポンサード リンク

By.KJ : 2006年08月09日 12:04 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)