今回は少し玄人向けのChrome拡張機能をご紹介します。
デザインやコーディングをしていて、
「この画像と画像って本当にまっすぐ？少しずれてるような気がするんだよな」
「このメイン画像の縦幅と横幅って一体いくつなんだろうか？」なんて思ったことはありませんか？
今回は、そんなあなたにぴったりのChrome拡張機能「Page Ruler」をご紹介します。
Webページ上でサイズや距離を計測できる定規
「Page Ruler」とは簡単にざっくり説明すると、Webページ上でサイズや距離を測ることができるChrome拡張機能です。
要素の縦幅や横幅をパパパッと知りたい時に、非常に役立ちます！
デザインデータをわざわざ開いて確認せずとも、要素同士の間隔や余白のスペースをすぐに把握できるようになるため、作業時間の短縮として非常に使えると思います！
「Page Ruler」のインストールと使い方
それでは、「Page Ruler」のインストール方法と使い方をご紹介します。
「Page Ruler」のインストール
「Page Ruler」のインストール方法は他のChrome拡張機能のインストール方法と変わりません。
以下のダウンロードサイトにアクセスし、『+CHROMEに追加』ボタンをクリックします。
すると、「Page Ruler」を追加しますか？というポップアップが表示されますので、『追加』ボタンをクリックします。
以上で「Page Ruler」のインストールは完了です。
「Page Ruler」の使い方
「Page Ruler」のインストールが完了したら、Chromeブラウザの右上に定規のアイコンが表示されます。
この定規アイコンをクリックし、ページ内の所定の箇所をドラッグ＆ドロップで選択することで、上部に計測結果が表示され、横幅や縦幅などを計測できるようになります。
要素も計測できる
「Page Ruler」では、要素も計測することができます。
上部の左端『＜＞』アイコンをクリックし、カーソルの位置を移動すると、要素が瞬時に計測、かつ使用しているタグまで表示してくれます。
まとめ
いかがでしたか？
今回は、ページ内の所定の箇所のサイズや距離を計測できるChrome拡張機能「Page Ruler」をご紹介しました。
Web業界ではない方にとっては、それほど利用機会が多くはない玄人向けのChrome拡張機能ですが、デザイナーやコーダーの方にとっては、作業時間の短縮に非常に使える機能なのではないでしょうか？
最後までお読みいただきありがとうございました。