スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig
Post on:2014年11月18日
sponsors
表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。
マージンが期待通りにならない、カラーの指定がおかしくないかなど、CSSのチェックに大活躍する機能拡張です。
使い方は簡単。
まずは、ChromeウェブストアからCSS Digをインストールします。
ページを表示し、ツールバーからCSS Digのボタンをクリックするだけです。
CSS Digでスタイルシートを解析
CSS Digはシンプルですが、機能も揃っています。
CSS Digのボタンをクリックした際に、スタイルシートの一覧が表示され、解析するものを選択することができます。
スタイルシートの一覧
選択するスタイルシートは一つでも、複数でもOK。
「Start Digging」をクリックすると、すぐにスタイルのブロックごとの解析が始まります。
スタイルのブロックの一覧
プロパティごとにまとめられ、それぞれ使用している数が表示されます。
左パネル：使用しているプロパティの一覧
そのプロパティをクリックすると、どのように使われているか表示されます。
左パネル：使用しているプロパティの一覧（marginは8箇所）
気になったプロパティがどこに使われているかも調べることができます。
左パネル：使用しているプロパティの一覧（margin:0;は3箇所）
「margin:0;」は3箇所で、こんな感じ。
右パネル：margin:0;を使用しているセレクタの一覧
colorの確認も分かりやすいですね。
左パネル：colorプロパティの一覧
sponsors
