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

関連記事

アニメーション背景を作成!Animated CSS Background Generator

どうも、べ〜やんです。 今回は、アニメーション背景を作成してくれる『Animated CSS Background Generator』を紹介します。 Animated CSS Background …

フリーイラスト素材サイトISOMETRIC

どうも、べ〜やんです。 今回は、おしゃれな無料フリーイラスト素材サイト『ISOMETRIC』を紹介します。 ISOMETRICとは 引用元:ISOMETRIC 『ISOMETRIC』はおしゃれなフリー …

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

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

複数のレスポンシブを同時に確認!Chromeの拡張機能ResponsiveViewer

どうも、べ〜やんです。 今回は、複数のレスポンシブを同時に確認できるChromeの拡張機能『ResponsiveViewer』を紹介します。 ResponsiveViewerとは Responsive …

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

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