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

Happy My Life

日常とか技術とか

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 }

元ネタ:A Handy CSS Debugging Snippet

HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる
HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる
ソシム 2007-06-20
売り上げランキング : 1800

おすすめ平均 star
starCSSのよいチュートリアル
star現時点で最強に分かりやすい。
star誰でも簡単にWEB(HP)ページを作ることができる

Amazonで詳しく見る
by G-Tools