WEB定規・ピクセル定規 PC画面をすぐ測れるおすすめツール5選
WEB定規・ピクセル定規とは画面モニター上に表示された定規です。サイズのわからない画像やコンテンツを目測するのに便利です。
縦横サイズを測る事ができ、ピクセル・インチ・センチメートルなど単位を変更する事ができます。
「斜めものさし」「Ruler」やChromeアプリのEdge: The Web Ruler、Windows向け「JRuler」などがインストール不要で高機能です。
PC上のコンテンツのサイズを測る
WEBサイト制作の仕事をする時、よくPC画面上のコンテンツ（画像や見出しなど）のサイズがどれくらいなのかを知りたくなる事があります。
その画像の縦横サイズ（ピクセル数）を把握して、それと同様サイズで画像などを作ったりする場合がありますよね。
この時、通常のimgタグで掲載されている画像であれば簡単にサイズを測る事ができます。
画像サイズの確認方法
Google Chromeの場合
Google Chromeの場合は対象の画像を右クリックして、「新しいタブで画像を開く」を選択します。
そうすると別枠で画像だけのページが表示され、そのタブ部分やURL部分にサイズが表示されますのでここで把握ができますね。
Firefox・IEの場合
画像を右クリックして一番下の「プロパティ」、もしくは「画像の情報を表示」をクリックすると、ウィンドウの中で画像のサイズが確認できます。
IEの場合の右クリックメニュー
画像のサイズ情報が表示される
Microsoft Edgeの場合
Edgeの場合はすぐにサイズがわかる機能は無いようです。
サイズがわからない画像がある
ケースによって上記のサイズが確認ができない場合があります。
例えばその画像にリンクが付いている場合、右クリック時した時のメニュー表記が変わります。
リンクが付いている画像は右クリックしても「新しいタブで画像を開く」や「画像の情報を表示」などが表示されないのですね。
そうなるとその画像サイズはすぐにはわかりません。
IEなども同様
IE等のブラウザではプロパティは出ますが、ウィンドウ内の表記が変わり、画像サイズなどは表示されません。
右クリックからプロパティを選択した時の情報
要素の背景画像になっている場合も
CSSなどで要素の背景画像として画像が使われている場合も、同様に右クリックメニューが使えません。
htmlタグ上にimgタグとして記述されているのではなく、CSSの「backgroundプロパティ」で表示させている為ですね。
この場合も画像サイズの情報を取得する事ができない事になりますね。
WEB定規・ピクセル定規とは
本記事で紹介する「WEB定規・ピクセル定規」はWEBコンテンツのサイズを画面上で測れるツールです。
つまりPCモニター上にリアルな定規が出現するのです。
それを実際にマウスでドラッグすると自由に移動させる事ができます。この定規で画像の縦横サイズを測れるのです。
あくまで目測になります
このWEB定規・ピクセル定規は、その画像サイズを正確に表示してくれるものではありません。
しかしリンク付きや背景画像などになった要素の、おおよそのサイズを把握する事ができるという面では大変便利な機能です。
実物の定規の代わりになる
そしてWEB上のコンテンツだけなく、実物の「定規」を手元に持っていない人は有効活用できます。
このWEB定規を表示させておいて、手元の免許証や他のものをモニターにあてがえば、サイズを測る事ができるのです。
画面幅一杯まで使える
仮に画面モニターが1920pxだったとすると、結構横サイズとしては長いですよね。
その長さに相当する実物定規を持っている人は普通はいらっしゃらないでしょう。
画面モニターに測りたいものをあてがう事さえできれば、すぐにいろいろなものの長さが測れるという訳です。
おすすめのWEB定規・ピクセル定規を4つ+1で紹介
それでは、私がおすすめするWEB定規（ピクセル定規）をいくつかご紹介しましょう。
どれか一つでも入れているといざという時に大変便利です。
それぞれ若干違いがありますので、用途に応じてお好みのものを使ってみて下さい。
4つ（＋1）全部入れる必要はおそらくないと思います。
斜めものさし
最初にお勧めするのは、斜めまで測れる定規「斜めものさし」です。
「斜めものさし」はインストール不要で簡単に利用できます。
圧縮ファイルがダウンロードできますので解凍しましょう。
解凍でき次第使う事ができます。
斜めものさしの使い方
ものさしとメモリ計測画面が同時に表示されます。メモリ数値やマウスの傾き角度などが常にわかるようになっています。
ものさしの端にマウスを合わせてドラッグすれば伸ばせます。
ものさし右端にある白丸「〇」にマウスを合わせてドラッグすると斜めに傾きます。90度にすれば縦方向も測れますね。
ものさしを消すときは、右クリックで表示させたメニューから「斜めものさしの終了」を押せば消えます。
設定メニューがあります
ものさしを右クリックして「設定」を押すと様々な設定項目が表示されます。
メモリ数値のデザイン変更や斜めに傾ける度合（単位）等を自由に設定する事ができます。
ピクセル定規：「Ruler」
「Ruler」は無料かつインストール不要でお手軽に使えます。
PC画面上に定規を表示してピクセル単位で長さを測れるツールです。
ダウンロードページは下記です。GitHubの英語ページです。
https://github.com/andrijac/ruler
Ruler導入方法
上記リンクで開いたページを少し下に移動し、紺色マークの「DOWNLOAD」をクリックします。
次のページを表示させると少し間が空いて、別ウィンドウが表示されます。
「Softpedia Secure Download(US)」をクリックします。
さらに次のページで、また少し間が空くかもしれませんが下にダウンロードバーが表示されます（Google Chromeの場合）。
Ruler-2.0.0.zipをダウンロード・解凍しましょう。
解凍する先はすぐ使えるようにデスクトップなどにしてみて下さい。
デスクトップに解凍すると、既に「Ruler」の黄色いアイコンマークと実行ファイルが表示されます。
これで準備は完了です。Rulerをダブルクリックすると定規が表示されます。
Rulerの使い方：さまざまな機能紹介
最初は横幅400pxで表示されますが、縦・横の端部分をドラッグすると自由にサイズを変える事ができます。
定規を右クリックするとメニューが表示されます。英語表記ですがすぐに把握できます。
チェックの付け外しで機能のON/OFFを切り替える事ができるようになっています。
「Stay on top」
PC画面にどのようなウィンドウを表示していてもその一番上に表示してくれるので、ウィンドウに埋もれる事がありません。
「Vertical」
文字通り定規が縦長に変更されます。チェックを外すと横に戻ります。
「tool tip」
チェックを付けていると、定規にマウスを合わせた時に定規の縦横のピクセルサイズをツールチップで表示してくれます。
定規の透明度を変更できます。100％から10％ずつ薄くする事ができます。
「Lock Resizing」
定規の大きさにロックを掛けて変更できなくします。
「Set size」
縦横のピクセルサイズ数値を入力する事で、定規を指定ピクセルサイズに変更します。
「Duplicate」
定規自体を複製できます。3つなどにもできます。
「Reset to Default」
初期状態に戻します。
「Exit」
定規を消します。
・WEB定規 Edge: The Web Ruler
Google Chromeのアプリ機能の一つとして使えるのが「Edge: The Web Ruler」です。
無料のChromeアドオンですね。
Chrome ウェブストア - Edge: The Web Ruler
Edge: The Web Rulerのインストール
開いたページでEdge（Ruler）をダウンロードをして下さい。
Google Chromeのアドオンアプリとしてダウンロードされ、使えるようになります。
起動の仕方
Chromeのブックマークメニュー上で右クリックします。
右クリックメニューの中から、アプリのショートカットを表示をクリックすると、アプリがブックマークバーに追加されます。
アプリをクリックしてEdge（Ruler）をクリックすると、黄色い定規が表示されます。
Edge（Ruler）の使い方
上で紹介したRuler同様にマウスで端をドラッグすると長さを伸ばせますが、横長にしている時に縦方向は伸びない様です。
その逆の場合もその様です。
「単位変更」
右下にある「px」「cm」「in」でそれぞれ、ピクセル・センチ・インチのメモリに変更されます。
「縦と横の四角マーク」
その隣にある横と縦の四角マークは複製表示です。
横の四角マークを押すと横の定規が複製され、縦のマークは縦定規が別に表示されます。
「歯車マーク」
歯車マークをクリックすると「Always on TOP」のチェックマークが出てきます。
チェックを付けると常にウィンドウの一番上に表示される機能です。
「×」マーク
それぞれについた×マークで閉じる事ができます。
・WEB定規 JRuler
対応OSがWindowsのWEB定規です。
インストール不要のツールで、機能はこれまでに紹介した定規とそれ程変わりはありません。
JRuler
http://www.spadixbd.com/freetools/jruler.htm
JRulerのダウンロード
上記ページへ行きます。spadixという英語のサイトです。
開いたページの黄色い定規の絵のすぐ下にある「Download」をクリックしましょう。
これまで同様にダウンロードバー（保存画面）が出てきます。
解凍先をデスクトップなどに決めて解凍させればすぐに使う事ができます。
JRulerの使い方
基本的に定規の上ではカーソルが「十字」になります。十字のまま定規はドラッグして移動できます。
そして十字のカーソルがある定規の位置をpx数で知らせてくれます。
マウスの位置で数値を知る事ができる便利な機能だと思います。
「ゲージバー」
つまみを右へ移動させると定規が横にどんどん伸びます。
「閉じる・最小化ボタン」
×マークで閉じます。その隣のマークは最小化でウィンドウ下に落とす事ができます。
JRuler 右クリックメニュー
「Flip」
これをクリックすると縦長と横長を切り替える事ができます。
「Mark center」
クリックすると定規の中心にマークが表示されます。開いている定規サイズの丁度真ん中を示すようになっています。
「Slide to Zero」
クリックするとモニター画面の端にピッタリくっついてくれます。
「Always on TOP」
PC画面にどのようなウィンドウを表示していてもその一番上に表示してくれるので、ウィンドウに埋もれる事がありません。
「Pixels inches Picas Centimeters」
クリックする事でそれぞれの単位に変更されます。mm（ミリメートル）はありません。
「Pixels per inch = 96」
1インチあたりのピクセル数が96がデフォルトになっていますので、このピクセル数を変更する事ができます。
・Webデザイナーのための「ピクセル定規」Windows版
最後に随分昔から出ていたピクセル定規を紹介します。
検索でも上位にヒットするので見つけやすいのですがバージョンアップがされていません。
そのため、この定規の難点としては
・1000pxまでしか測れない
・単位はpxのみ
・HELPが使えない
などがあります。しかし通常使う分にはそれほど問題は無いと思います。
ダウンロードページ
インストールソフトですのでダウンロードした実行ファイルを展開すると、インストーラーが開きます。
まとめ
以上様々ご紹介をしてきましたが、上の3つの内どれか一つを入れていれば問題は無いと思います。
WEBサイト作成の仕事をしていると、この様なWEB定規を使うシーンは出てきますので、どれか一つは使い方を覚えておきましょう。
操作はどれも簡単ですから問題はありませんね。
