何重にも依存して定義されている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&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる | |
 | ソシム 2007-06-20 売り上げランキング : 1800 おすすめ平均   CSSのよいチュートリアル 現時点で最強に分かりやすい。誰でも簡単にWEB（HP）ページを作ることができるAmazonで詳しく見る by G-Tools |