CSSをお手軽にデバッグする方法

2009/11/21 by demuyan · 3 コメント
カテゴリー: Web 
  このエントリーを含むはてなブックマーク この記事をクリップ！ コメントを見る

何重にも依存して定義されている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

こちらもあわせてどうぞ

Tags: , ,

Comments

3 コメント on CSSをお手軽にデバッグする方法

  1. Tweets that mention CSSをお手軽にデバッグする方法 | Happy My Life -- Topsy.com on 土, 21st 11月 2009 9:15 AM

    2. [...] This post was mentioned on Twitter by demuyan, Tajima. Tajima said: RT @checkela CSSをお手軽にデバッグする方法 | Happy My Life http://bit.ly/8BROfL [...]

  2. [ブックマーク] HTML+CSSネタ « Hyhy's Weblog on 土, 21st 11月 2009 9:08 PM

    3. [...] ■CSS http://cssnite.jp/ CSS Nite Vol.40の内容ブログ 今どきのCSSレイアウトの特徴 デベロッパーなら知っておきたいCSSテクニック overflow: hidden;を使ったサンプル色々 覚えておいて損はない CSS の定番テクニック BEST 5 シンプルだけど便利なCSSプロパティー5 CSSで作るシンプルかつクールなボタンサンプル「Simply-Buttons v2」 スタイルシートで実装する、アイデア溢れる画像ギャラリー IE 6とIE 7のためのCSSハック16選 魅力的なCSSメニュー10 コーディングするのが楽になるかも？と思うCSSテクニックのまとめ IE共通の9つのCSSバグをそれぞれ解決する方法 CSSをお手軽にデバッグする方法 [...]

  3. links for 2009-11-22 « 個人的な雑記 on 月, 23rd 11月 2009 7:03 AM

    4. [...] CSSをお手軽にデバッグする方法 | Happy My Life (tags: css) [...]

コメントをどうぞ...





Trackback URL

Get Adobe Flash playerPlugin by wpburn.com wordpress themes