CSS Digとは、Webページの解析用拡張機能で、使用されているプロパティ一覧や使われ方などをひと目で確認できるものです。
Chromeの拡張機能として使えます。
インストール
こちらから→ CSS Dig
中央にある「ADD TO CHROME」をクリックし、ChromeのWeb storeにいきます。
「+ ADD TO CHROME」をクリックして、拡張機能をインストールしましょう。
ツールバーに↑このように表示されるはずです(dって書かれているやつです)
さっそく使ってみる
universionsのページでやってみました。
ツールバーの「d」をクリックすると、上記のようなスタイルシートの一覧がでてきます。styleblockと書かれているのは、インラインで書かれたStyleです。
「START DIGGING」で進みましょう。(ちなみにDIGGINGは採掘・掘ることです。なんかそんな名前のポケモンいましたね)
プロパティ毎に並ぶ解析方法
Chromeの開発者ツールがセレクター毎に見れるのに対し、CSS Digではプロパティ毎にみることとなります(セレクターでも見れます)
paddingやmarginが下層部に隠れて思うように表示できない場合など、活躍してくれそうです。
また、colorなどの整理もひと目で見れるので簡単ですね。
上記でも、継ぎ足し継ぎ足しした結果、設定が曖昧になってしまっているのがわかりますね…。
まとめ
普段利用している開発者ツールとはまた違ったデバッグツール、「CSS Dig」のご紹介でした。
自分が作っていないサイトのトレースをするなど、色使いのパターンやフォントに関する設定、ページ全体の把握ができるのがポイントです!
また、はじめに解析対象のスタイルシートを選ぶことができるので、フレームワークやライブラリ系CSSは外すといいかもしれません。
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事