【CSS Peeper】webデザイナーは持ってて当たり前!?なハイパーツール

CSS peeperを使えばどんなwebサイトでもデザインを丸裸にすることができます。そんな革新的なツールの魅力を余すところなく紹介していきます。

webデザイナーやコーダーの方・もしくはそれらの職業を目指している方は以下のようなことを必ず思ったことがあるはずです。

  1. 「このサイトの配色いいね!どんなカラーコードだろう?」
  2. 「このサイトのフォントいいな!何使ってるんだろう?」
  3. 「このサイトのこの要素ってクラス名どうなってるだろう?」
  4. 「このレイアウトが綺麗だな!余白ってどうなっているんだろう?」

いままでGoogle Chromeの開発者ツールを使っていたという方も多いかもしれませんが、「CSS pepper」なら上記のすべての情報をとてもスマートに調べることができます。

CSS Peeperのインストール

CSS PeeperはGoogle Chromeの無料の拡張機能です。

Chromeを持っていない人は以下の記事を参考にダウンロードしましょう。

関連記事

【完全ガイド版】Google Chromeのダウンロード方法と使い方

 

css-pepperの拡張機能の追加

すでに持っている人はこちらのリンクから拡張機能を追加しましょう。

「Chromeに追加」でインストール完了です!

 CSSpepperの使い方

1

csspepperを起動

解析したいwebページを開いた状態で、ブラウザの右上に「P」のマークをクリックしましょう。

2

即座にcsspepperがwebサイトを解析して

  1. OGP画像(SNSでシェアされる時の画像)
  2. タイトル
  3. bodyに設定されているfont-family

をパネルで表示してくれます。

サイト全体にどんなフォントが設定されているかCSS pepperを立ち上げて一発でわかってしまいます。

webサイトの配色を調べる

webサイトの配色を調べる

表示されてパネルの下にある「水玉のアイコン」をクリックすることで、表示されているページに使用されている全ての色のカラーコードが表示されます。

特定の要素の余白やフォントを調べる

1

特定の要素をクリック

CSSpepperを起動している状態で、特定の要素をクリックします。

今回は記事のタイトルを検証してみます。

2

パネルにクリックした要素の情報が表示されます。

上から順に

  1. 要素のタグ名 or 要素についているid/class名
  2. 要素のサイズと余白
  3. font-family
  4. サイズ・字間・行間・行揃い
  5. 要素の文字色+背景色

とかなりデザインに関するcssを一目で把握することができます。

3

カラーコードをホバーするとアイコンがでてくるので、クリックすると色をコピーすることもできます。

サイトに使用されている画像一式をダウンロードすることも可能

サイトに使われている画像一式をダウンロード

この機能はかなり衝撃でした。webデザインの勉強をしている人で特にwebサイトの模写をしている人にとってはかなり重宝するツールなんじゃないでしょうか?

  1. パネル下の一番右のアイコンをクリックするとそのページで使用されている画像が一覧で表示されます。
  2. 左の「Export All」をクリックするとその画像一式をダウンロードすることができます。

最後にひとこと

「CSS pepper」すごくないですか?これだけ便利で無料なのがすごいですよね。

  • フォント関連の情報
  • 配色
  • 余白やサイズ
  • 使っている画像

を頻繁に調べる機会があるならぜひ活用してみてくださいね!
記事がためになったらSNSでのシェアにご協力お願いします!

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【完全ガイド版】Google Chromeのダウンロード方法と使い方

  • 【完全ガイド版】Sublime Textの使い方と設定方法 - MacとWindow...

  • 【最新版】機能と速さで選ぶならコレ!おすすめブラウザ11選を比較

  • HTMLとCSSの文法チェックツール7選!よくある文法エラーも紹介

  • 【日本語ガイド】Asanaの使い方のすべて。登録〜タスク管理まで解説

記事をもっと見る +

目次を開く