fbpx

『Page Ruler』の使い方。画像のサイズが簡単に測れる!

『Page Ruler』の使い方。画像のサイズが簡単に測れる!

 

色々なサイズが測れるPage Ruler

 

 

どうも、JUNです!

 

ブログなど、パソコンをやっていると
ウェブページ上のいろいろなものの
サイズを測りたくなりませんか?

 

  • 画像のサイズ
  • 本文の幅
  • サイドバーの幅

 

こういった類のものです。

 

そんな時に便利なのが
Chromeの拡張機能の一つ
『Page Ruler』です。

 

拡張機能とは
 
Chromeの機能を増やしたり
強化したりする専用の追加プログラム。
 
簡単に言うと、ブラウザの機能を
拡張させるためのプログラムです。
 
この拡張機能を使ってブラウザを
パワーアップさせるということです。
 
※拡張機能はそのほとんどが無料です。

 

 

Page Rulerでは、ウェブページの
画像サイズや任意の要素のサイズが
ピクセル単位で、簡単に測れます。

 

とても便利な機能ですので
ぜひ、活用してくださいね!

 

ということで、今回は
Page Rulerの追加方法と使い方
について、解説していきます!

 

Page RulerをChromeに追加しよう!

 

 

まずはGoogle Chromeに
Page Rulerを追加しましょう。

 

追加すると言っても
難しいことは何一つありませんので
一緒にやっていきましょう!

 

下記のリンクをクリックすると
インストールページに飛びます。

 

Page Rulerのインストールはコチラ

 

インストールページに飛んだら
Chromeに追加
を、クリックしてください。

 

クロールへの追加方法

 

上記画像のような
確認画面が表示されます。

 

拡張機能を追加
を、選択してください。

 

これでインストールは完了です!

 

めちゃくちゃ簡単でしたね^^

 

拡張機能の『Page Ruler』が
Chromeに無事に追加されました。

 

ウェブページ上のサイズを測ってみよう!

 
ウェブページ上のサイズを測ってみよう!

 

 

Chromeに追加できたら
実際に使ってみましょう!!

 

上記画像の水色の箇所を見てください。

 

このように、インストールが完了すると
画面右上にPage Rulerの
アイコンが表示されるようになります。

 

Page Rulerの機能を使う時は
そのアイコンをクリックしてください。

 

Page Rulerの使い方1

 

アイコンをクリックすると、ブラウザの
画面上部に、サイズの測定結果を表す
上記画像のようなエリアが表示されます。

 

また、マウスのカーソルが
大きな十字の形に変わります。

 

Page Rulerの使い方2

 

この十字のマウスカーソルの状態で
画面上の測定したい範囲の始点をクリック、
そのままドラッグして選択してください。

 

ドラッグ=クリックしたままマウスを動かすこと

 

そうすると、選択した範囲のサイズの
測定結果が計測され、表示されます。

 

Page Rulerの使い方3

 

上記画像から、選択した範囲が
以下のようなサイズ・座標で
ある、ということがわかります。
 

  • サイズ
     
    Width=幅=700px
    Height=高さ=410px
  •  

  • 左上の座標
     
    Left=左からの距離=89px
    Top=上からの距離=262px
  •  

  • 右下の座標
     
    Right=左からの距離=789px
    Bottom=上からの距離=672px

 
ちなみに、ここでいう座標とは
ブラウザの表示エリアの
左上からの距離を指しています。

 

文章だけでは分かりづらいと思うので
下記の画像を見てイメージしてください!

 

Page Rulerの使い方4

 

なんとなく、わかりましたでしょうか?

 

このように、Page Rulerを使えば
ウェブページ上の様々なサイズを
簡単に、すぐに測ることが出来ます。

 

Page Rulerを終了するには
画面右上のPage Rulerのアイコンを
再度クリックしてください。

 

クリックすると、画面上部にあった
サイズの測定結果を表すエリアが消えます。

 

各要素のサイズも簡単に測れます!

 

 

Page Rulerの機能は、ウェブページ上の
任意のサイズを測るだけではありません。

 

divなど、ページを構成する各要素の
サイズも、簡単に測ることが出来ます。

 

div要素の測り方

 

Page Rulerの1番左に表示されている
< />Elements】をクリックしてください。

 

クリックすると、マウスカーソルの位置に
ある要素
が自動で選択されて
幅、高さ、画面左上からの座標が測れます。

 

下の画像では、マウスのカーソルが
記事一覧(h1)にあるので
h1のサイズが自動で測られていますね!

 

h要素の測り方

 

また、現在選択されている要素が
どんな種類なのか
上位の要素は何なのか
なども自動で表示してくれます。

 

これだけ簡単にWEB上の画像や
コンテンツのサイズを測れる
拡張機能は、他にはありません。

 

しかも、利用は無料です。

 

すごく便利な機能なので
ぜひ、Page Rulerを活用して
効率よくビジネスを行ってくださいね!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です