サイトのフォントや要素を簡単チェックchrome拡張機能 CSS Peeper

OtherGoogle

Google chromeにはF12キーなどで開く事がデベロッパーツール(検証)機能がありますが、情報が多く特に初心者には見づらいものですが、CSSのみを簡単にチェックできる「CSS Peeper」という無料の拡張ツールがあります。

参考にしたいような素敵な訪問先サイトでも配色や画像サイズ、余白の取り方などをサッと見られるので便利です。

出来る事

以下の事が簡単に確認出来ます。

  • OGP画像
  • タイトル
  • フォント・フォントサイズ
  • CSS容量
  • ページ全体のロードタイム
  • CSS個別要素(色・画像・サイズ・余白など)

要素をクリックするだけで、要素名やサイズ・色がわかるので、スタイルシートを検索したり見直す時間が短縮できるので、サイト管理にも必須のツールと言えるかもしれません。

 

では早速、インストールから使い方を・・。

無料拡張する

CSS Peeper

上記から「Chromeに追加」を押します。

CSS Peeper

 

ポップアップが出るので「拡張機能を追加」を押します。

CSS Peeper

追加されたメッセージが表示されるので閉じます。

CSS Peeper

ブラウザ上部に「P」マークが追加されます。

CSS Peeper

 

使い方

確認したいサイトを表示し「P」マークを押します。

 

基本情報表示

以下が表示されます。

  • OGP画像(SNSなどで表示されるサイト画像)
  • サイトタイトル
  • ページのフォント
  • CSS容量
  • ページロード時間

CSS Peeper

 

カラーの確認

下部にあるマークの真ん中「しずく型マーク」を押します。

CSS Peeper

 

下の方に使用しているカラーコードと割合が出ます。

CSS Peeper

カラーの上にカーソルを持っていくと「COPY」マークが出るので、ここからカラーコードをコピーする事も出来ます。

CSS Peeper

 

画像の確認

下部にあるマークの右側にある「カメラマーク」を押します。

CSS Peeper

 

ページに使われている画像が表示されます。

Export All」を押すと画像をすべてダウンロードする事も出来ます。

CSS Peeper

 

個別要素を調べる

ページ内の要素を選択すると以下が表示されます。

  • 要素名
  • サイズ・余白
  • フォント
  • フォントサイズ
  • 背景色

CSS Peeper

 

以上です。

OtherGoogle

Posted by 綾糸