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

 

解決します

・手軽に要素を検証したい

・Chromeのデフォルト以外の検証ツールが知りたい

・必要な分だけの要素の構成が知りたい

 

こんにちは、ワタリビト(wataribito)です。

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

 

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

 

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

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

 

CSS Peeperで個別要素を検証

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

09/23/2019
30daysトライアル Day4

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

09/12/2019

 

Chromeの拡張機能「CSS Peeper」

 

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

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

 

CSS Peeperでできること

 

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

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

 

CSS Peeperでできること

・ページ全体のロードタイムとCSSファイル容量の確認

・ページ全体、個別要素に使われている色や画像の確認

・個別要素の幅や高さなどの確認

 



CSS Peeperを使ってみよう

 

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

 

CSS Peeperの使い方

 

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

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

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

 

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

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

 

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

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

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

 

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

 

CSS Peeperページ個別要素を検証

 

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




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

 

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

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

 

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

 

CSS Peeperで個別要素を検証

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

09/23/2019
30daysトライアル Day4

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

09/12/2019

 

少しでもおもしろいと思ったらシェアお願いします?