スタイルシートの検証に便利!ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig

表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。

マージンが期待通りにならない、カラーの指定がおかしくないかなど、CSSのチェックに大活躍する機能拡張です。

サイトのキャプチャ

CSS Dig
CSS Dig -GitHub

使い方は簡単。
まずは、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プロパティの一覧

top of page

©2017 coliss