サイトで使われている要素やCSSの確認ができるChrome拡張機能「CSSPeeper」

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年10月19日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

いろいろなウェブサイトを眺めていると、「この色使いいいな」「使っている要素はなんだろう」「どういう構成なんだろう」などなど、気になることがたくさんありますよね。

CSSPeeper」は、サイトを構成するそういった要素を、簡単に抽出できるChrome拡張機能です。

拡張機能のインストール

  1. Chromeウェブストアで「CSSPeeper」を検索し、「CHROMEに追加」をクリック。
    CHROMEに追加
  2. 確認メッセージが表示されるので「拡張機能を追加」をクリック。
    拡張機能を追加
  3. 「CSSPeeper」がChromeに追加されました。
    Chromeに追加されました

使い方

インストールすると、ツールバーにCSSPeeperのアイコンが追加されます。

クリックすると、まず「General」が表示されます。
フォントやCSSファイルサイズ、ロードタイムなどの確認ができます。

General

下には3つのアイコンが表示されていて、それぞれ「General」「Colors」「Assets」となっています。

icon

 

Colors」では、そのページに使用されているカラーが表示されます。

Colors

マウスオーバーするとスポイトのアイコンが出てきて、クリックするとカラーコードがコピーされます。これは便利ですね。

カラーコードをコピー

 

Assets」では、そのページに使用されている画像などが一覧で表示されます。
上部の「Export All」をクリックすれば、まとめてダウンロードも可能です。

Assets

 

そして、「Inspector」。
ページの要素をホバーすると赤い点線で範囲選択され…

Inspector-1

クリックすると青い点線に変わり、マージンやフォントなどのプロパティを見ることができます。

Inspector-2

 

カッコいいデザインのサイトを見つけたら、この「CSSPeeper」で見てみると勉強にもなりそうですね。