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

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

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

CSSPeeperのキャプチャ

CSSPeeper

CSSPeeperの特徴

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

CSSPeeperの特徴

インスペクタ

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

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

CSSPeeperの特徴

カラー

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

CSSPeeperの特徴

アセット

CSSPeeperのインストール

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

サイトのキャプチャ

CSSPeeper -Chromeウェブストア

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

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

サイトのキャプチャ

CSSPeeperのインストール完了

CSSPeeperの使い方

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

CSSPeeperを使ってみた

General

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

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

CSSPeeperを使ってみた

Colors

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

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

CSSPeeperを使ってみた

Assets

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

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

CSSPeeperを使ってみた

Inspector

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

top of page

©2017 coliss