Page Rulerの使い方|バナー画像などのサイズを測れるGoogle Chrome拡張機能

Page Rulerの使い方|バナー画像などのサイズを測れるGoogle Chrome拡張機能

Page RulerはWEBサイト上のバナー画像やコンテンツ幅なのサイズを測れるGoogle Chrome拡張機能です。

他の定規系拡張機能と比べて高機能なところが特徴で、HTML要素を検出したり、ブラウザで読み込んだローカルのHTMLファイルのサイズを測ることもできます。

今回はPage Rulerのインストールから様々な使い方までを紹介していきます。

Page Rulerとは

Page Rulerのダウンロードページ

Page Rulerとは閲覧中のWEBサイトのバナー画像やコンテンツ幅などのサイズをピクセル単位で測ることができるGoogle Chrome拡張機能です。

単純に要素のサイズを測る他の拡張機能とは異なり、下記に挙げるような使い方もできる高機能な拡張機能になっています。

  1. HTML要素を検出してサイズを測れる
  2. WEBページ内での要素の座標を測れる
  3. ローカルのHTMLファイルをブラウザで読み込んでサイズを測れる
  4. ショートカットキーで起動/終了や位置の調整を行える

特にHTML要素の検出機能はかなり便利です。
下記で詳しく紹介しますが、要素にマウスオーバーするだけでサイズを一瞬で正確に測れるようになります。
もし今あなたが使っている定規系拡張機能にこの機能がついていなければ、すぐに乗り換えを検討してもいいでしょう。

Page Rulerの使い方

インストールの方法

ChromeウェブストアのPage Rulerのダウンロードページからインストールします。

※Page RulerはGoogle Chrome専用の拡張機能です。FirefoxやSafariなどのブラウザでは残念ながら対応していません。

任意の位置で自由にサイズを測る

これはもっともベーシックなPage Rulerの使い方で、自由に選択した範囲のサイズを測る方法です。

Page Rulerをインストールすると、ブラウザの右上に定規型のアイコンが表示されるようになります。

ブラウザの右上に表示されるPage Rulerのアイコン

アイコンをクリックすると拡張機能が起動します。
画面上部に青色のバーが表示され、マウスカーソルが十字形になったら起動中です。

Page Ruler起動時の画面の表示

この状態でサイズを測りたい場所をドラッグ選択すると上の青いバーにサイズが表示されます。

選択した範囲のサイズが画面上部の青いバーに表示される

選択した範囲のサイズは下記の数値で確認します(画像も参考にしてください)。

  • Width:選択した範囲の横幅
  • Height:選択した範囲の縦幅
Width(横幅)とHeight(縦幅)の計測イメージ

選択した範囲のページ内での座標も調べることができます。
座標とはWEBページ左上(起点)から選択した範囲までの距離のことで、下記の数値で確認します(画像も参考にしてください)。

  • Left:起点から選択範囲の左端までの距離
  • Top:起点から選択範囲の上端までの距離
  • Right:起点から選択範囲の右端までの距離
  • Bottom:起点から選択範囲の下端までの距離
選択範囲の座標の計測イメージ

ここまでが自由選択でのサイズの測り方です。以下では他の測り方も見ていきましょう。

HTML要素を検出してサイズを測る

Page RulerにはWEBページ内のHTML要素を検出してサイズを測る機能がついています。
たとえばimg(画像)やh1(見出し)などの目に見える要素や、divやpなどの範囲が目に見えにくい要素のサイズを可視化することができます。

HTML要素の検出モードをONにするには、画面左上の<>マークをクリックします。

HTML要素の検出モードの起動ボタン

ページ内でマウスを動かすと自動的にHTML要素を選択するようになります。
サイズを測りたい要素にマウスオーバーすると、下記の画像のように要素のサイズとタグ名やIDクラス名などのHTML情報が表示されます。

選択したHTML要素のサイズとタグ名やID・クラス名などの情報が表示

ローカルのHTMLファイルを開いてサイズを測る

ローカルのHTMLファイルをブラウザで開いてサイズを測ることも、上記と同様の操作で可能です。
ただし初回に拡張機能の設定を変更する必要がありますので、下記の操作を実行しておきましょう。

画面右上のPage Rulerのアイコンを右クリックし、『拡張機能を管理』をクリックします。

Page Rulerの右クリックメニュー > 拡張機能を管理

拡張機能の管理画面が表示されるので、『ファイルのURLへのアクセスを許可する』にチェックを入れます。

拡張機能の管理画面 > ファイルのURLへのアクセスを許可するにチェックを入れる

これでローカルのHTMLファイルでもサイズを測れるようになります。実際にファイルを開いて試してみましょう。

ショートカットキーを利用して操作する

ショートカットキーを利用して、拡張機能を起動/終了したり、選択したサイズの微調整を行うことができます。

Page Rulerの起動

Alt + P:Page Rulerを起動または終了する

定規の操作

矢印キー(↑↓←→):定規を任意の方向に1ピクセル移動する

+ Shift:定規を10ピクセル移動する

+ Ctrl(Command):定規を1ピクセル外側に広げる

+ Shift + Ctrl(Command):定規を10ピクセル外側に広げる

+ Ctrl(Command) + Alt:定規を1ピクセル内側に縮小する

+ Shift + Ctrl(Command) + Alt:定規を10ピクセル内側に縮小する

ツールバーの操作

矢印キー(↑):値を1増やす

+ Shift:値を10増やす

矢印キー(↓):値を1減らす

+ Shift:値を10減らす

(オプション)拡張機能をカスタマイズする

定規の色を変更する

Page Rulerの定規は最初みずいろですが、変更することもできます。
ツールバーの『Color』をクリックして任意の色を選択しましょう。

ツールバーのColorから定規の色を変更する

枠線(ガイドライン)の表示を切り替える

Page Rulerでは範囲を選択した際に枠線(ガイドライン)が表示されますが、これを非表示にすることもできます。
ツールバーの『Show Guides』をクリックして、表示/非表示を切り替えましょう。

定規の枠線(ガイドライン)を非表示に変更

ツールバーの表示位置を変更する

ツールバーは最初、画面上部に表示されますが、画面下部に表示位置を変更することもできます。
ツールバーの『↓マーク』のボタンをクリックして、表示位置を変更しましょう。

ツールバー の表示位置を画面上下切り替える

※画像は下部に切り替え後のものです。

まとめ

今回は閲覧中のWEBページのバナー画像やコンテンツ幅などの要素のサイズを測ることができるGoogle Chrome拡張機能『Page Ruler』について、インストールから様々な使い方までを紹介してきました。

類似の定規系拡張機能はたくさんありますが、HTML要素の検出や豊富なショートカットキーをもつPage Rulerは、できるだけ高速かつ正確にサイズを測りたい方にとっては最適な拡張機能でしょう。
Google Chromeの検証機能にもPage Rulerと同様のHTML要素の選択やサイズの確認機能はついていますが、拡張機能を使ったほうが圧倒的に速いことは間違いありません。

あなたがもし同系統の拡張機能を使っているもしくは、Google Chromeの検証機能を使っているのであれば、Page Rulerを導入して作業を効率化しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です