DESIGN SERVICE

大きさを測定!Google Chromeの拡張機能Page Ruler Redux

投稿日:


どうも、べ〜やんです。

今回は、画面上のさまざまなサイズを簡単に測定できるGoogle Chromeの拡張機能Page Ruler Reduxを紹介します。





Page Ruler Reduxとは


Page Ruler Reduxとはページ上で要素などのサイズを測定できるGoogle Chromeの拡張機能です。

要素の幅、高さやマージンの幅、高さなどを測定するとこができて便利です。

Google Chromeの拡張機能なのでChromeを使用してください。


使い方


ChromeウェブストアからPage Ruler Reduxを追加します。

Chromeウェブストア-Page Ruler Redux

測定したいページにアクセスしてアイコンをクリック、ポインターが「+」に変わり画面上部に数値を表示するバーが表示されます。

測定したい箇所をドラッグ&ドロップで指定すると、画面上部のバーに幅、高さや画面上での位置を示す数値などが表示されます。

また、バー左側にある「<>」マークをクリックすると、マウスオーバーした箇所を測定しるモードに切り替わります。

ドラッグ&ドロップが必要なくなるので便利!

測定する範囲はドラッグ&ドロップで移動させることができます。

バーの右端にある閉じアイコンで終了します。


おわりに


今回は、画面上のさまざまなサイズを簡単に測定できるGoogle Chromeの拡張機能Page Ruler Reduxを紹介しました。

お手本にしたいページのマージンやエレメントの大きさを測定するのによく使用しています。



-DESIGN, SERVICE
-

執筆者:


comment

関連記事

Googleアドセンス審査通過

どうも、べ〜やんです。 今回は、このブログがGoogleアドセンスの審査を通過したので、審査に通過した時点のブログの状態を紹介します。 同じようにGoogleアドセンスの審査を受けようと思っている方の …

日本語フリーフォントを試せる!ためしがき

どうも、べ〜やんです。 今回は、好きな文章で複数の日本語フリーフォントを一度に確認できるサービス『ためしがき』を紹介します。 ためしがきとは 引用元:ためしがき 『ためしがき』は商用利用可能な日本語の …

簡単にQRコードを自動生成する

どうも、べ〜やんです。 今回は、簡単にQRコードを自動生成してくれるサイトを紹介します。 しかも無料です。 QRコードとは ご存知だとは思いますが、QRコードとはこれです↓ beeyanblog QR …

インターフェイスと配色をコード化!ColorTool

どうも、べ〜やんです。 今回は、インターフェイスと配色をコード化してくれるMaterialDesignのColorToolを紹介します。 ColorToolとは 引用元:Color Tool-Mate …

Webデザイナーになりたい人におすすめサービス5選

どうも、べ〜やんです。 今回は、Webデザイナーを目指している方におすすめな学習サービスを5つ紹介します。 Webデザインを学べるサービスの中でも、実際に私が利用したことのあるサービスに絞って5つ紹介 …