何重にも依存して定義されている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 おすすめ平均 ![]() ![]() ![]() ![]() Amazonで詳しく見る by G-Tools |