Chrome拡張機能「Page Ruler」はブラウザの画像などが測れるピクセル定規

Webサイトを見ていて「この画像の大きさはどのぐらい?」とか「今縮めているブラウザの幅はどのぐらい?」と思うときがあります。
定規のように簡単に、思った箇所の大きさを測れるChrome拡張機能の Page Ruler を使ってみたらとても簡単にそれらの大きさが測れるようになりましたので、使い方などについて書きます。

Chrome拡張機能 Page Ruler をインストールする

Chromeの拡張機能 Page Ruler をインストールしてみます。

1 Chromeの右上にあるハンバーガーメニューをクリック
その他のツール クリック
拡張機能 クリック

拡張機能が表示されます。一番下の、他の拡張機能を見る をクリック

Chromeウェブストアに行くので、この入力エリアに

page ruler と入力してリターン

拡張機能 Page Ruler が表示されるので、 + Chromeに追加 をクリック

Page Ruler を追加しますか? というポップアップが出るので 拡張機能を追加 をクリック

このようにショートカットなどの情報が表示され、インストールは終了しました。

Page Ruler の使い方

インストールすると、Chromeに

こんなふうに、定規のアイコンが表示されます。Page Rulerで大きさを測るには、このアイコンをクリックします。

クリックするとブラウザの上部にこのように大きさを表示する部分が現れます。

カーソルが 十文字 になるので、計りたい部分の左上でクリックして、はかり終わりのところまでドラッグして、マウスを離します。

するとこんな感じに、計った部分が薄い青色で表示されます。上部には、指定した部分の

Width(幅)、Height(高さ)、Left(左側の位置)、Top(上部の位置)、Right(右側の位置)、Bottom(下部の位置)が表示されています。つまり

こんな感じです。

要素を計ることもできます

Page Ruler の左端にある

<> マークをクリックすると、ページの要素を計ることができます。これをクリックして

カーソルを移動すると、カーソル位置の要素

瞬時に計測されて、大きさなどが表示されます。赤枠部分にはその要素のタグが表示されます。

ローカルのHTMLファイルを表示しているときに利用するには?

このPage Rulerですが、PCにあるHTMLファイルをブラウザで見ているときなどは、

クリックしても全く反応してくれなくて、使うことができません。このようなファイルでもPage Rulerを使いたいときは、

1 Chromeの右上にあるハンバーガーメニューをクリック
その他のツール クリック
拡張機能 クリック

して、

Page Ruler の

ファイルのURLへのアクセスを許可する にチェックを入れます。すると

PCにあるHTMLファイルでも Page Ruler が使えるようになりました(^^)/

[Amazon sponsored link] Webデザイン 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る