デベロッパーツールを使ったWEBサイトのサイズの測り方

WEBサイトに添付されているバナー画像の横幅や高さ、サイドバーの横幅などのサイズが知りたいという質問をいただきました。

誰でも簡単に調べられる方法についてご紹介いたします。

拡張機能を追加したり、インストールの必要はありません。

とても手軽にできますのでぜひ参考にしてみてください。

検証を開いて調べる

サイズを調べたい画像を右クリックします。

右クリックで開いたメニューから「検証」をクリックします。

デベロッパーツールが開きます。

HTMLコードがズラッと表示されている中で背景に色が付いた部分があります。

その部分が先ほど右クリックした画像のHTMLコードになります。

調べたい画像のHTMLコードにカーソルを合わせる

背景色がついている部分にマウスカーソルを合わせると指定した画像が青色になります。

青色になったら、指定部分が狙いと一緒なのでHTMLコード中でピクセル単位のサイズ表示されている部分を探します。

画像が青色にならない場合は違う部分が指定されているのでカーソルを移動させうまく表示されるように探ってみてください。

まとめ

デベロッパーツールで手軽に使えるので便利です。

HTMLコードがたくさん出てくるので苦手に感じるかたもいるかと思いますが、画像を指定していると背景色が付きわかりやすくなります。

インストールなどの必要もないのでぜひ活用してみてください。

error: Content is protected !!
Copy Protected by Chetan's WP-Copyprotect.