CSSの確認に使いやすくてかなり便利！要素検証、アセット抽出ができるChromeの機能拡張 -CSSPeeper
Post on:2017年4月17日
sponsors
CSSで思うようにいかない時に最初に確認すべきことは、その要素がどのように実装されているかです。各要素がどのようにレイアウトされており、マージンやパディングがどのように与えられており、プロパティとその値がどのように指定されているか、CSSの確認に役立つChromeの機能拡張を紹介します。
デザイン面の検証にも役立ち、カラー抽出や使用画像をすべて抽出といった機能も備えています。
洗練されたUIが使ってて気持ちいいのもポイントです。
CSSPeeperの特徴
CSSPeeperでは、3+1の機能を備えています。
まずは、+1のインスペクタ。
インスペクタ
ページ上のあらゆる要素を要素単位でハイライトし、指定した要素のCSSの各プロパティの値をすべて表示します。
3つのうちの1つ目は飛ばして、2つ目のカラー抽出。
単体でこの機能を備えているツールもありますが、CSSPeeperだけでさまざまな機能と一緒に使用できるので便利ですね。
カラー
3つのうちの3つ目は、ページで使用しているアセット、画像を一覧表示し、zipファイルでまとめてダウンロードできます。
アセット
CSSPeeperのインストール
CSSPeeperのインストールは、Chromeウェブストアからです。
右上の「Chromeに追加」ボタンをクリックします。
インストールが完了すると、ツールバーからCSSPeeperを利用できます。
CSSPeeperのインストール完了
CSSPeeperの使い方
使い方は簡単です。
ページを表示し、ツールバーからCSSPeeperをクリックします。
General
デフォルトで表示されるのは「General」で、ページの基礎情報が一覧で表示されます。スタイルシートのファイルサイズ、ロード時間なども含まれます。
下部のタブでは、3つの機能が利用できます（+1のインスペクタは後述）。
Colors
2つ目のタブはカラーで、CSSで使用されているカラーが一覧で表示されます。各カラーはコードとしてコピーが可能です。
3つ目はアセットの抽出です。
ページで使用されている画像・メディアファイルが一覧で表示されます。
Assets
上部の「Export All」をクリックすると、すべてのアセットがダウンロードできます。ページ上の画像を一括でダウンロードできるので、便利ですね。
最後はインスペクタ。
これは、ページ上の任意の要素をクリックすると、表示されます。
Inspector
要素をホバーすると、レッドの点線が表示され、クリックでブルーの点線に変わります。ブルーの点線で指定された要素のCSSの各プロパティの値がすべて表示されます。
sponsors
