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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

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

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

背景素材を生成!Cool Backgrounds

どうも、べ〜やんです。 今回は、背景素材を生成してくれるCool Backgroundsを紹介します。 Cool Backgroundsとは 引用元:Cool Backgrounds Cool Bac …

[かんたん]Photoshopで画像加工してみた

どうも、べ〜やんです。 このブログ用にphotoshopで画像を加工してみましたので、手順をざっくり紹介します。 3分でできる簡単なものです。 完成品がこれ↓ 手順 まずは加工前の元画像を用意します。 …

ブックマークはもういらない、超便利Pocket

どうも、べ〜やんです。 今回は、お気に入りのwebページを保存しておく便利なサービスのPocketを紹介します。 Pocketとは Pocketは、お気に入りのwebページを保存しておく世界で2,20 …

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

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