Webサイトを見ていて「この画像の大きさはどのぐらい？」とか「今縮めているブラウザの幅はどのぐらい？」と思うときがあります。
定規のように簡単に、思った箇所の大きさを測れるChrome拡張機能の Page Ruler を使ってみたらとても簡単にそれらの大きさが測れるようになりましたので、使い方などについて書きます。
Chrome拡張機能 Page Ruler をインストールする
Chromeの拡張機能 Page Ruler をインストールしてみます。
１ 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を使いたいときは、
１ Chromeの右上にあるハンバーガーメニューをクリック
２ その他のツール クリック
３ 拡張機能 クリック
して、
Page Ruler の
ファイルのURLへのアクセスを許可する にチェックを入れます。すると
PCにあるHTMLファイルでも Page Ruler が使えるようになりました(^^)/
[amazon_searchlink search=”Webデザイン”]
コメント