<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/04/csspeeper.png" alt="" width="592" height="355" class="alignnone size-full wp-image-30917" /></p>
<p>気になるデザインのサイトでCSSをチェックするときに、Chromeのデベロッパーツールでは情報が多すぎて効率が悪いと感じる人もいるのではないかと思います。</p>
<p>そんなとき、デザインに必要な情報だけを取り出してくれるGoogle Chromeの拡張機能をご紹介します。</p>
<!--more-->

<h3 class="header-label">デザインに必要な情報だけを取り出せるChrome拡張機能「CSSPeeper」</h3>
<p>「<a target="_blank" href="https://csspeeper.com/">CSSPeeper</a>」は、<strong>開いているサイトから必要なCSS関連の情報だけを取得できるChrome拡張機能。</strong></p>
<p>ボタンや枠など指定した要素のCSSだけを表示したり、サイトで使っているカラーコードを一覧して部分的に取得したりといったことが容易におこなえるようになっています。</p>

<h4 class="tips">サイトのCSS概要を表示</h4>
[caption id="attachment_30916" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/csspeeper-general.png" alt="" width="592" height="460" class="size-full wp-image-30916" /> サイトの基本情報を表示。[/caption]
<p>部分ごとに指定しているフォントファミリーやファイルサイズ、読み込み速度を表示します。</p>

<h4 class="tips">クリックした部品のCSSを表示</h4>
[caption id="attachment_30915" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/csspeeper-inspector.png" alt="" width="592" height="488" class="size-full wp-image-30915" /> 部品をクリックするだけで情報を表示。[/caption]
<p>気になる部品にフォーカスし、その部分にあてられているプロパティーを視覚的に確認することができます。フォーカスするときの動きも軽快で使い勝手よく感じます。</p>

<h4 class="tips">ページで使われているカラーコードを一覧</h4>
[caption id="attachment_30914" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/csspeeper-colors.png" alt="" width="592" height="507" class="size-full wp-image-30914" /> ページで使われている色とカラーコードを一覧。[/caption]
<p>ページの配色で使われている色とカラーコード、指定している透過率を一覧。それぞれ個別にカラーコードをコピーできるようになっています。</p>

<h4 class="tips">ページで使われている画像を一覧</h4>
[caption id="attachment_30913" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/04/csspeeper-assets.png" alt="" width="592" height="527" class="size-full wp-image-30913" /> ページ上で使われている画像を一覧。[/caption]
<p>ページで使われている画像を一覧します。Export Allをクリックすることで一括でダウンロードすることも可能です。</p>

<p>興味がある方は<a target="_blank" href="https://csspeeper.com/">CSSPeeper</a>へどうぞ。</p>
