Webページ内の画像サイズを簡単に測れる!Chrome拡張「Page Ruler」の使い方を紹介

Webページ内の画像サイズを簡単に測れるChrome拡張「Page Ruler」の使い方をご紹介

Webページを見ていて「この画像大きさどのくらいだろ?」、「どれほど画像の大きさを縮小すれば、Webページに上手く配置できるのだろうか?」といった悩みを持ったことはありませんか?

Webデザインを生業としていると、どうしてもバナーやコンテンツのサイズには気を使うものですよね。

今回は、そんなWebページ内に存在する画像やコンテンツなどの大きさを手軽に測れるGoogle拡張機能「Page Ruler」の使い方をご紹介していきます。

これで完璧!デザインレイアウトお助けツール「Page Ruler」とは…?

デザイン

Google拡張機能「Page Ruler」とは、Webページの画像やコンテンツ幅を手軽に計測できる拡張機能になります。

これを使うことによって、バナーの配置はもちろん、どの場所にどういったコンテンツを置くことで、見やすいWebページを作成できるのかといった具体的な方法を知ることも出来ます。

Google拡張機能「Page Ruler」の使い方

では最初に、ChromeウェブストアよりGoogle拡張機能「Page Ruler」を導入しましょう。

Google拡張機能「Page Ruler」の使い方

※Google拡張機能の導入の仕方が分からないという方は、コチラの「非公式Google拡張機能導入マニュアル」をご参照ください。

サイズの測り方

サイズの測り方

Webページのサイズを測るには、まず拡張機能を起動させる必要があります。拡張機能を起動するには、「拡張機能アイコン」を左クリックし、メニューバーを表示しましょう。

サイズの測り方

次にマウスポインタをドラッグして大きさを測りたい範囲を指定していきます。

サイズの測り方

するとこのようにパーツの細かい大きさを測ることが出来ます。CSSの数値を弄るときの参考にしてみると良いでしょう。

メニューバーの見方

メニューバーの見方

ちなみにメニューバーにはこのようにいくつかの項目があります。ここではこのメニューバーの意味についても軽く触れていきます。

メニューバーの見方

まずWidthというのは、幅の大きさを表します。囲んだ範囲の起点となる場所を0としてこのように測ります。

メニューバーの見方

Heightは高さを表します。こちらも同じく囲んだ範囲の起点となる場所を0としてこのように測ります。

メニューバーの見方

LeftはWebページ左側からの位置を表します。囲んだ範囲ではなく、Webページの左側を0としてこのように測ります。

メニューバーの見方

TOPはWebページ上からの位置を表します。こちらも囲んだ範囲ではなく、Webページの上側を0としてこのように測ります。

他にもRightは、Webページ右側からの位置を、Bottomは、下からの位置を表すものとなっています。

基本的な見方の説明は以上になります。ぜひ自分が作りたいWebサイトのパーツを配置決めするときに役立ててみましょう。

おわりに…

おわりに

今回は、Google拡張機能「Page Ruler」の機能と使い方についてご紹介しました。

Webでデザインを生業としている方はぜひ活用してみてください。

関連リンク

Google拡張機能「Page Ruler」

スポンサードリンク