簡単計測!Webサイト構成や画像のサイズを簡単に測る方法

   

Webサイトを運営していると、適切な画像サイズや、サイトバランス、ブラウザの幅などピクセルをどれぐらいに設定したらいいか迷う事があります。そんな時は自分で測ってしまえばいいのです。

今回は、Firefoxの拡張機能「MesureIt」とChromeの拡張機能「Page Ruler」それぞれ一つずつご紹介します。Page Rulerの方が優秀で使い勝手がいいですが、よく使うブラウザなどあるかもしれませんので、2つ紹介です。

自分のサイトや参考にするサイトのサイズを簡単に測る方法なので是非導入してみて下さい。

Sponsored Link

FirefoxのMeasureIt

▶️MeasureItダウンロードページ

こちらのダウンロードページから拡張機能を追加します。

使い方は至ってシンプル。メジャーアイコンがメニューバーに追加されるのでクリックをして、測りたい部分を選択すると、pxが表示されます。

ChromeのPage Ruler

▶️Page Rulerダウンロードページ

ダウンロードページから拡張を追加をクリックします。

ダウンロードありがとう〜と出ますのでこれで完了。

アドレスバー左にメジャーアイコンが追加されるのでクリックします。

測りたい部分をクリックし、長押ししたまま範囲を設定してマウスを離せばサイズを設定できます。基本はMeasureItと同じです。

数字は上部青帯部分に表示されます。

「MeasureIt」より優れた点

左端にある「< >」をクリックすると右端にある「 Tracking Mode」がOnになります。すると測りたい場所にマウスオンするだけで、ピクセルサイズと要素が分かるようになります。

トップページの画像部分にマウスを合わせるだけで、水色に表示された部分のサイズや要素が出てきます。
この場合は#headingにある.imgという感じです。

これはかなり便利なのでおすすめです。

*注意:画像は、ブラウザ画面に合わせてサイズが変わる場合があるので、正確なサイズを測りたい場合などは注意してください。

 - Webデザイン