Page Ruler Reduxの使い方 ~Webページ上のサイズをピクセル単位で測定する~

広告

Page Ruler Redux は Chrome 拡張機能の一つで、 Web ページに表示されている画像や任意の位置のサイズをピクセル単位で測ることができます。ここでは Page Ruler Redux のインストール方法と実際の使い方について解説します。

Page Ruler ReduxをChromeに追加する

拡張機能 Page Ruler Redux の Chrome ウェブストアのページへアクセスしてください。

Page Ruler Redux - Chrome ウェブストア

Page Ruler ReduxをChromeに追加する(1)

拡張機能の説明等を見て頂き、問題なさそうであれば「CHROMEに追加」をクリックして下さい。

Page Ruler ReduxをChromeに追加する(2)

確認画面が表示されますので「拡張機能を追加」をクリックして下さい。

Page Ruler ReduxをChromeに追加する(3)

次のようなページが表示されて、拡張機能 Page Ruler Redux が Chrome に追加されました。

Page Ruler ReduxをChromeに追加する(4)

Webページ上の任意の位置のサイズを測定する

最初に Chrome で開いている Web ページの任意の位置のサイズを測定してみます。 Chrome の画面右上に表示されている Page Ruler Redux のアイコンをクリックして下さい。

Webページ上の任意の位置のサイズを測定する(1)

Chrome の画面上部に測定結果を表示するエリアが表示されます。

Webページ上の任意の位置のサイズを測定する(2)

またマウスカーソルが大きな十字の形に変わります。このマウスカーソルをブラウザの画面上で測定したい位置の始点で一度クリックし、そのまま測定位置の終点までドラッグして下さい。

Webページ上の任意の位置のサイズを測定する(3)

Webページ上の任意の位置のサイズを測定する(4)

長方形のエリアのサイズが測定されて画面上部のエリアに表示されます。エリアの幅と高さは「Width」と「Height」に表示され、エリアの左上と右下の座標がそれぞれ「Left」「Top」「Right」「Bottom」に表示されます。

Webページ上の任意の位置のサイズを測定する(5)

なお座標というのは、 Chrome の表示エリア左上を原点とした場合のピクセル単位のサイズとなります。

Webページ上の任意の位置のサイズを測定する(6)

このようにブラウザに表示されたウェブページ上の任意の位置のサイズを簡単に測定することができます。なおサイズの測定を終了するには再度 Chrome 画面右上の Page Ruler Redux のアイコンをクリックして下さい。

Webページ上の任意の位置のサイズを測定する(7)

Webページ上の任意の位置のサイズを測定する(8)

Webページの各要素のサイズを表示する

ページ内の任意の位置ではなくページを構成する各要素単位でサイズを調べることもできます。 Chrome 画面右上に表示された Page Ruler Redux のアイコンをクリックすると画面の上部に測定結果を表示するエリアが表示されます。このエリアの一番左側にある「<>」にマウスを合わせて下さい。

Webページの各要素のサイズを表示する(1)

「Enable Element Mode」と表示されますのでクリックして下さい。これで任意の位置のサイズではなく要素単位でサイズを測定できるようになります。

Webページの各要素のサイズを表示する(2)

マウスの位置にある要素が自動的に選択されて、幅や高さ、ブラウザ表示エリア左上からの位置が表示されます。また現在サイズを表示している要素の種類、上位の要素や同じ階層の要素などの名前が画面左上に表示されます。

Webページの各要素のサイズを表示する(2)

Webページの各要素のサイズを表示する(2)

各要素単位で表示されている位置や、幅や高さなどを調べる場合に便利です。

キーボードショートカットを使って調査エリアのサイズや位置を微調整する

任意の位置のサイズを調べる時に、キーボードショートカットを使用して調べるエリアのサイズや位置の微調整を行うことができます。例えば次のようにマウスのドラッグを使ってエリアを指定してサイズを調べます。

キーボードショートカットを使って調査エリアのサイズや位置を微調整する(1)

この状態でキーボードの矢印キーを押すと、エリアの幅と高さを保ったまま矢印キーを押した方向へエリアが移動します。例えば右キーを押しているとエリアが右へ移動します。

キーボードショートカットを使って調査エリアのサイズや位置を微調整する(2)

その他にも次のようなキーボードショートカットが用意されています。

・矢印キー 押した方向へ幅と高さを維持したままエリアを移動
・[Ctrl]+矢印キー 押した方向へ1px単位でエリア拡張
・[Ctrl]+[Alt]+矢印キー 押した方向へ1px単位でエリア縮小
・[Ctrl]+[Shift]+矢印キー 押した方向へ10px単位でエリア拡張
・[Ctrl]+[Alt]+[Shift]+矢印キー 押した方向へ10px単位でエリア縮小

これらのキーボードショートカットを使うことでより細かくサイズを測定したり、選択エリアのサイズを維持したまま別の場所へ移動させて比較することもできます。

Page Ruler Reduxを削除する

拡張機能の Page Ruler Redux が不要になった場合は Chrome から削除することができます。削除するには Chrome の画面右上に表示されている Page Ruler Redux の アイコンを右クリックし、表示されたメニューの中から「Chromeから削除」をクリックして下さい。

Page Ruler Reduxを削除する(1)

確認画面が表示されますので「削除」をクリックして下さい。

Page Ruler Reduxを削除する(2)

Page Ruler Redux が削除されました。

Page Ruler Reduxを削除する(3)

-- --

Page Ruler Redux のインストール方法と実際の使い方について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。