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 …

Googleアドセンス審査通過

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

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

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

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

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …