CSSの確認に使いやすくてかなり便利！要素検証、アセット抽出ができるChromeの機能拡張 -CSSPeeper

Post on:2017年4月17日

sponsorsr

CSSで思うようにいかない時に最初に確認すべきことは、その要素がどのように実装されているかです。各要素がどのようにレイアウトされており、マージンやパディングがどのように与えられており、プロパティとその値がどのように指定されているか、CSSの確認に役立つChromeの機能拡張を紹介します。

デザイン面の検証にも役立ち、カラー抽出や使用画像をすべて抽出といった機能も備えています。
洗練されたUIが使ってて気持ちいいのもポイントです。

CSSPeeperの特徴

CSSPeeperでは、3+1の機能を備えています。
まずは、+1のインスペクタ。

インスペクタ

ページ上のあらゆる要素を要素単位でハイライトし、指定した要素のCSSの各プロパティの値をすべて表示します。

3つのうちの1つ目は飛ばして、2つ目のカラー抽出。
単体でこの機能を備えているツールもありますが、CSSPeeperだけでさまざまな機能と一緒に使用できるので便利ですね。

カラー

3つのうちの3つ目は、ページで使用しているアセット、画像を一覧表示し、zipファイルでまとめてダウンロードできます。

アセット

CSSPeeperのインストールは、Chromeウェブストアからです。

右上の「Chromeに追加」ボタンをクリックします。

インストールが完了すると、ツールバーからCSSPeeperを利用できます。

CSSPeeperのインストール完了

使い方は簡単です。
ページを表示し、ツールバーからCSSPeeperをクリックします。

General

デフォルトで表示されるのは「General」で、ページの基礎情報が一覧で表示されます。スタイルシートのファイルサイズ、ロード時間なども含まれます。

下部のタブでは、3つの機能が利用できます（+1のインスペクタは後述）。

Colors

2つ目のタブはカラーで、CSSで使用されているカラーが一覧で表示されます。各カラーはコードとしてコピーが可能です。

3つ目はアセットの抽出です。
ページで使用されている画像・メディアファイルが一覧で表示されます。

Assets

上部の「Export All」をクリックすると、すべてのアセットがダウンロードできます。ページ上の画像を一括でダウンロードできるので、便利ですね。

最後はインスペクタ。
これは、ページ上の任意の要素をクリックすると、表示されます。

Inspector

要素をホバーすると、レッドの点線が表示され、クリックでブルーの点線に変わります。ブルーの点線で指定された要素のCSSの各プロパティの値がすべて表示されます。