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アドセンスの審査を受けようと思っている方の …

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

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

WEBデザインができるまで

どうも、べ〜やんです。 webサイトのデザインができるまでの流れを簡単にまとめたいと思います。 webデザイナーの仕事に興味があり実際にどんな流れで仕事をしているのかを知り方にオススメです。 全体の流 …

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

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