当サイトには広告が含まれております

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

この記事は最終更新日から5年経過しています。内容が古い可能性があります。

残念ですが、現在この拡張機能はChromeウェブストアのポリシーに違反しているということで使うことができません。お使いになっている場合は拡張機能から削除することをお勧めします。

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_searchlink search=”Webデザイン”]

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る