【CSS】CSS Digをつかって、開発者ツールとはちょっと違ったCSS解析

CSS Digとは、Webページの解析用拡張機能で、使用されているプロパティ一覧や使われ方などをひと目で確認できるものです。

Chromeの拡張機能として使えます。

インストール

こちらから→ CSS Dig

中央にある「ADD TO CHROME」をクリックし、ChromeのWeb storeにいきます。

「＋ ADD TO CHROME」をクリックして、拡張機能をインストールしましょう。

ツールバーに↑このように表示されるはずです（ｄって書かれているやつです）

universionsのページでやってみました。

ツールバーの「ｄ」をクリックすると、上記のようなスタイルシートの一覧がでてきます。styleblockと書かれているのは、インラインで書かれたStyleです。

「START DIGGING」で進みましょう。（ちなみにDIGGINGは採掘・掘ることです。なんかそんな名前のポケモンいましたね）

Chromeの開発者ツールがセレクター毎に見れるのに対し、CSS Digではプロパティ毎にみることとなります（セレクターでも見れます）

paddingやmarginが下層部に隠れて思うように表示できない場合など、活躍してくれそうです。

また、colorなどの整理もひと目で見れるので簡単ですね。
上記でも、継ぎ足し継ぎ足しした結果、設定が曖昧になってしまっているのがわかりますね…。

普段利用している開発者ツールとはまた違ったデバッグツール、「CSS Dig」のご紹介でした。
自分が作っていないサイトのトレースをするなど、色使いのパターンやフォントに関する設定、ページ全体の把握ができるのがポイントです！

また、はじめに解析対象のスタイルシートを選ぶことができるので、フレームワークやライブラリ系CSSは外すといいかもしれません。

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。