初心者におすすめ検証ツール！CSS Peeperで簡単に要素の検証をしよう

こんにちは、ワタリビト（wataribito）です。

ChromeでCtrl+Shift+Iで検証機能が使えるのはもうご存知だと思いますが、実はこの機能では表示される情報が多くてごちゃごちゃしてて見にくいという問題があります。

初心者だとどこをどう見ていいのか良く分からないときがありますね?

これから紹介する検証機能はもっとシンプルに要素を検証できる機能です。

要素の大きさや色、ページ全体のロードタイムなどを一発で調べられて便利ですよ。

30daysトライアル要点まとめ　Day11.Bootstrapを知る

09/23/2019

30daysトライアル要点まとめ　Day4

09/12/2019

Chromeの拡張機能「CSS Peeper」

今回はChromeの拡張機能であるCSSPeeperを使います。

このリンクから拡張機能を有効にしてください。

CSS Peeperでできること

Ctrl+Shift+Iで使えるおなじみの検証機能をもっとシンプルにした機能です。

具体的には以下の通りです（ツイート内の動画）

ページ内の要素が丸わかりになるChrome拡張機能のCSS Peeper

検証機能をシンプルにした機能みたい

良く調べてないけど、ウィンドウ左上の＜をクリックするとサイト全体（一部？）に使われている色や画像も表示される模様@kazutaka_dev のツイートよりhttps://t.co/yCQtfLmPsf pic.twitter.com/LUEYkiqGIR

— ワタリビト?旅とWebと3DCG (@wataribito) 2019年10月1日

CSS Peeperを使ってみよう

使い方はとても簡単です。

CSS Peeperの使い方

まずは拡張機能をChromeにインストールします。

するとアイコンが上のバーに表示されるので、検証したいページを開いてからアイコンをクリック。

すると以下のようなウィンドウが開きます（ツイッターマイページの要素を検証しました）

CSS Peeperページ全体要素を検証

ページの名前、使用フォント、ロードタイムとCSSファイルの容量が表示されてますね。

このCSSファイルが大きすぎるとロードタイムが長くなって読者が離脱する原因になるので注意。

ちなみに、ウィンドウ下の水滴マークとカメラマークはそれぞれ、全体で使われている色・ページ全体で表示されている画像を一覧表示してくれます。

今度は全体ではなく個別に要素を検証してみます（赤い点線の部分を検証）

クラス名と要素の大きさ、フォントの種類とサイズ、文字間隔、色などが検証できました。

CSS Peeperはちょっとだけ調べたいときに便利！

Ctrl+Shift+Iで使えるデフォルトの検証機能よりだいぶシンプルです。

しかし、要素の大きさや色、文字間隔など自分のWeb制作に取り入れたいアイディアを見つけたらすぐに調べて応用するといった場合に使うと、デフォルトの機能よりはやく簡潔に調べられますね?

CSS Peeperのインストールはこちらから

30daysトライアル要点まとめ　Day11.Bootstrapを知る

09/23/2019

30daysトライアル要点まとめ　Day4

09/12/2019