ページ上にあるコンテンツの位置・サイズを確認するのに役立つChrome拡張「Page Ruler」

「Page Ruler」v2.0.9

　「Page Ruler」は、閲覧ページにあるコンテンツの寸法と位置を測定するのに役立つ“定規（ルーラー）”を「Google Chrome」に追加する拡張機能。編集部にてWindows 10上の「Google Chrome」v49.0.2623.87で動作を確認した。“Chrome ウェブストア”から無償でダウンロードできる。

　コンテンツが意図した位置に、期待した大きさで表示されているかどうかを確認するのに便利な拡張機能。「Google Chrome」のデベロッパーツールにもルーラーを表示する機能は備わっているが、本拡張機能の方が高機能で何かと便利だ。

　利用するには、まず拡張機能のボタンを押す。すると、Webページの上部にバーが追加され、マウスで選択した位置がピクセル単位の座標で確認できるようになる。選択位置は、矢印キーで微調整することも可能。バーの数値を変更することで、選択位置を変更することもできる。縦横十字に表示されるガイドを利用すれば、コンテンツの表示位置が揃っているかどうかを簡単にチェックすることも可能だ。

　さらにマウスをドラッグすれば、矩形を選択することが可能。選択範囲の幅と高さはバーに表示され、バーに数値を入力して選択範囲のサイズを変更することもできる。また、四隅のドラッグでサイズを微調整したり、矢印キーで選択範囲全体を移動させることも可能。大雑把に選択したい場合はマウス操作が、細かい調整は矢印キーが便利だろう。また、ピクセル単位で厳密にサイズや位置を指定したい場合は、バーの数値入力を活用するとよい。

HTMLの要素を選択するモード

　そのほかにも、本拡張機能はHTMLの要素を選択するモードも備えている。要素選択モードを利用するには、バーの左端にある［<>］ボタンをクリックしよう。するとバーが2段表示になると同時にトラッキングモードがONになり、マウスカーソルの下にある要素が選択できるようになる。マウスをクリックすると選択状態が確定され、トラッキングモードは解除。バーに要素の幅と高さ、位置が表示される。その下には選択した要素の親子・兄弟関係の要素が表示され、選択すると当該要素がアクティブになる。

　なお、もしバーの表示が邪魔になる場合は、右端の［↓］ボタンを押すことでWebページの下部へ移動させることが可能。そのほかにも、ガイドの色をカスタマイズしたり、ガイドの表示を無効化するといったオプションが用意されている。

　また、本拡張機能はローカルページでも利用することが可能。ただし、その場合は“拡張機能”画面（chrome://extensions/）で［ファイルの URL へのアクセスを許可する］を有効化しておく必要がある。