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

広告

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

1.Page RulerをChromeに追加する
2.ウェブページ上の任意の位置のサイズを測定する
3.ウェブページの各要素のサイズを表示する
4.キーボードショートカットを使って調査エリアのサイズや位置を微調整する

Chrome ウェブストアの拡張機能のページへアクセスして下さい。

p7-1

画面左上の検索ボックスで「Page Ruler」を検索して下さい。

p7-2

検索結果の中で次の「Page Ruler」をクリックして下さい。

p7-3

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

p7-4

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

p7-5

拡張機能がChromeに追加されました。更新履歴などの記載されたページが表示されます。

p7-6

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

p7-7

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

p7-8

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

p7-9

p7-10

この長方形のエリアのサイズが測定されて画面上部のエリアに表示されました。幅と高さは「Width」と「Height」に表示されます。

p7-11

また左上と右下の座標がそれぞれ「Left」「Top」「Right」「Bottom」に表示されます。

p7-12

ここでいう座標とは、ブラウザの表示エリアの左上からのピクセル単位でのサイズです。

p7-13

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

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

p7-14

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

p7-15

マウスの位置にある要素が自動的に選択されて、幅や高さ、ブラウザ表示エリア左上からの位置が表示されます。

p7-16

p7-17

また現在サイズを表示している要素の種類、上位の要素や同じ階層の要素などの名前が画面左上に表示されます。

p7-18

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

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

p7-19

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

p7-20

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

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

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

-- --

ウェブページ上の任意の位置のサイズを測定することができるChrome拡張機能のPage Rulerについて解説しました。

( Written by Tatsuo Ikura+ )