ブログの画像サイズや横幅スペースのピクセル数の調べ方

2021年11月19日 2021年11月21日

自分のブログを作成して、記事の中やサイドバー・ヘッダーフッターなどに入れる画像を準備しようと思ったときに、この場所・この画像のサイズ・横幅や高さは何ピクセルなんだろう？、、、と悩むことがあると思います。

スキマとかが気にならないなら、だいたいのサイズでアバウトに画像をいったん作っちゃって、後でアバウトに微調整して完了でもいいと思うんですが、やっぱりすぐパッと正確なピクセル単位でのサイズが分かるとうれしいし便利ですよね。

そこで今回は、ブラウザ上で表示しているブログやウェブサイトなどの画像のサイズや、記事やサイドバーなどの各スペースの横幅・高さを、ピクセル単位での調べ方をご紹介します。

１，デベロッパーツール（開発者ツール）

デベロッパーツールという名前から、いかにも難しそうなイメージが伝わってきますが、とりあえずパッと正確にページ内の狙った場所やパーツのピクセルサイズを調べることができる、ブラウザにもとから付いている機能です。

グーグルクロームなら【Dev tools】、ファイヤーフォックスなら【ウェブ開発ツール】、microsoft edgeなら【開発者ツール】、という名前の機能で使うことができます。

１，まずページの中のサイズを調べたい場所・パーツを右クリックして、表示されるメニューの中から【検証】（もしくは調査）をクリックします。

２，ブラウザ画面の下か右に、ＨＴＭＬコードがいっぱい表示されたスペースが出てきます。さきほど、右クリックで指定した場所のＨＴＭＬコードが、背景に色がついてマークされています。

３，背景に色がついてマークされているＨＴＭＬコードの上に、マウスカーソルを移動させて乗せると、ブラウザ画面にその場所・画像のピクセルサイズが表示されます。

ブラウザを開いていればできる方法なので、ページ閲覧中に準備なしで利用できてとても便利です。
拡張機能やアプリ・ソフトのインストールなども必要なにのでお手軽です♪

ブラウザに拡張機能（アドオン）で定規の機能を追加して、画面の中の好きな場所をピクセル単位でサイズを測ることができるようにします。

１のデベロッパーツールに比べて、拡張機能（アドオン）をブラウザに追加インストールする手間がかかってしまいますが、一度ピクセル定規の機能を追加しておけば、幅や画像サイズを調べたいときにワンクリックでピクセル単位の定規を画面上で使うことができて便利です。

実物の定規を使うような感覚で使えるので、使い方や理解もとてもカンタンで、サイズを調べることが頻繁にあるようなら、ぜひブラウザに追加しておいたほうがいいです。

グーグルクロームなら【Page Ruler Redux】、ファイヤーフォックスなら【Measure-it】などが、定規の拡張機能として有名で、定番人気です。

１と２で紹介したピクセルサイズの調べ方は、あくまでもブラウザの中の表示内容の範囲の中で、横幅スペースや画像サイズを測る方法です。

ブログやウェブサイトの画像サイズや幅などのサイズ測定ならそれで足りると思いますが、ディスプレイ画面上のすべてのサイズを測れるようにしたいなら、ウィンドウズの定規アプリのインストールになります。

正確なサイズを調べるときは【デベロッパーツール】で、アバウトにサイズ感を知りたいときは拡張機能の定規で、デベロッパーツールと拡張機能（アドオン）の定規の併用がおすすめです。

この記事を書いた人

写真の開き方も分からないレベルでＥＣサイトの編集バイトに入って幾年月。。流されるままいつの間にかウェブデザイナーが仕事に。作業に必要な部分のみの偏ったパソコン知識となってしまいました。