サイト上の画像や要素のサイズが測れるChrome拡張機能「Page Ruler」がとっても便利!

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年8月28日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

ウェブサイトを見ている時や、制作の参考にする時に「この部分のサイズが知りたい」と思うことありませんか?

画像であればプロパティを見たり、直接ダウンロードすれば調べることもできなくはないですが、「要素」とかだとちょっと面倒ですよね。

今までは、どうしても知りたい時はページをキャプチャして編集ソフトなどで調べたりしていたんですが、Chromeの拡張機能に理想的なツールがあったので試してみました!
→ Page Ruler

拡張機能のインストール

  1. chromeウェブストアで「Page Ruler」を検索し、「CHROMEに追加」をクリック。

     
  2. 確認メッセージが表示されるので「拡張機能を追加」をクリック。

     
  3. インストールが完了すると、ツールバーにアイコンが表示されます。

     

Page Rulerの使い方

ツールバーのアイコンをクリックすると、画面上部にPage Rulerのバーが現れます。

このバーは、右にある「」のアイコンをクリックすれば画面下部に移動させることもできます。

このバーが出ている間は、マウスカーソルが「+」の形に変わり、そのままドラッグすれば画像などの大きさを測ることができます。

任意の場所をドラッグすると、バーに測定した数値が表示されます。

左端の「<>」のアイコンをクリックすると、要素ごとの大きさを測ることも可能です。

計測が終わったら、右端の「×」ボタンをクリックするか、「Alt + P」キーで終了します。

その他、ショートカットキーでルーラーを移動させたり、大きさを微調整することもできます。

矢印キー ルーラーを任意の方向に1ピクセル移動する
 + Shift ルーラーを10ピクセル移動する
 + Ctrl(Command) ルーラーを1ピクセルだけ外側に広げる
 + Shift + Ctrl(Command) ルーラーを外側に10ピクセルずつ広げる
 + Ctrl(Command)+ Alt ルーラーを1ピクセル内側に縮小する
 + Shift + Ctrl(Command)+ Alt ルーラーを内側に10ピクセル縮小する

また、デフォルトだとローカルファイルには対応していませんが、拡張機能のオプションで「ファイルのURLへのアクセスを許可する」にチェックを入れれば、ローカルにあるサイトでの計測も可能になります。

Chromeのメニューから「その他のツール>拡張機能>Page Ruler」と進むと、設定できます。

 

というわけで、簡単に画像や要素の大きさが測れる「Page Ruler」の紹介でした。

「この画像、何ピクセルくらいだろう?」と知りたくなることってわりとよくあるので、こうやってブラウザ上ですぐに測ることができるのはかなりありがたいですね!