ウェブサイトにバナーやボタンを設置するときに、「このスペースはどのくらいの広さだろう……？」という場面は必ず出てくる。HTMLやCSSのソースを読めば正確な数字は分かるが、いちいち該当箇所を探すのは面倒。Chrome拡張「MeasureIt!」で、直接ブラウザ上から測ってしまおう。

ウェブサイトのバナーやボタンを設置する際、または外部に発注する際に、ピクセル数をの情報を求められることはよくある。厳密な数値はソースコードから調べるべきだが、大まかな数字でいいなら「MeasureIt!」で計測するのが便利。
ウェブページ上で領域を選択すると、その範囲のピクセル数を出してくれる。目分量のサイズを知りたいのなら、この拡張でちゃっちゃっと調べてしまおう。

■ ブラウザ上の仮想的なメジャーでピクセル数を直接測る

「MeasureIt!」をChromeWebStoreからインストールしよう

インストールが完了すると、Chromeのツールバーに物差しのデザインのアイコンが追加されるのでクリック

Cromeの画面が計測モードになり、領域選択を行えるようになる。ピクセル数を計測したい領域をドラックして選択しよう

選択した領域の左上にピクセル数が表示される。「W」が領域の幅、「H」が領域の高さとなる