Webサイトを見ているとき、そこで使われている配色やデザインを参考にしたいと思うことはありませんか？
今回は、私がいつも愛用しているWeb上のフォントや色、画像などの情報を簡単に調べることができる便利な
「CSS Peeper」というChromeの拡張機能についてご紹介します。

Google Chromeの拡張機能

Chromeに機能を追加するプログラムファイルのことです。
Chromeはこれにより様々な便利な機能を追加でき、独自の作業環境を作れることが魅力の一つです。
Chrome ウェブストアから無料でダウンロードでき、インストールもとても簡単にできます。

CSS Peeperとは

直感的でよりスマートにWebデザインに関する情報を調べられる機能で、
閲覧しているページのCSS情報を教えてくれます。
フォントや色、埋め込まれている画像などもまとめて表示してくれます。
また、Web Inspector（WebKit由来のデバッグツール）も内蔵されているので、
気になる箇所のCSS情報の詳細を知ることができます。

CSS Peeperの追加

まずは、Chrome ウェブストアから「CSS Peeper」をインストールしましょう。
Chromeの右上にCSS Peeperのアイコンが現れたら、無事インストール完了です。

実際に使ってみよう！

使い方はとても簡単！
右上に出ている「CSS Peeper」のアイコンをクリック。

クリックするとページ全体の情報が出てきます。

さらに下にあるアイコンをクリックするとそれぞれフォント情報・色情報・画像情報に切り替わり、
そこから色をコピーしたり、画像をダウンロードすることができます。

部分的な情報を知りたい場合は、右のウィンドウが出ている状態でサイト上をクリックすると、
その部分の情報が表示されます。

以上、使い方はとても簡単です。
みなさんも気になるサイトでこのツールを使用し、研究してみてはいかがでしょうか？

Author:スタッフN