![](https://beeyanblog.com/wp-content/uploads/2019/10/PAK85_coding15095904_TP_V-1024x682.jpg)
どうも、べ〜やんです。
今回は、画面上のさまざまなサイズを簡単に測定できるGoogle Chromeの拡張機能Page Ruler Reduxを紹介します。
![](http://image.moshimo.com/af-img/0866/000000029835.jpg)
目次
Page Ruler Reduxとは
Page Ruler Reduxとはページ上で要素などのサイズを測定できるGoogle Chromeの拡張機能です。
要素の幅、高さやマージンの幅、高さなどを測定するとこができて便利です。
Google Chromeの拡張機能なのでChromeを使用してください。
使い方
ChromeウェブストアからPage Ruler Reduxを追加します。
測定したいページにアクセスしてアイコンをクリック、ポインターが「+」に変わり画面上部に数値を表示するバーが表示されます。
測定したい箇所をドラッグ&ドロップで指定すると、画面上部のバーに幅、高さや画面上での位置を示す数値などが表示されます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/1cb004b0b5066fe832f78845b29918bb-1024x519.png)
また、バー左側にある「<>」マークをクリックすると、マウスオーバーした箇所を測定しるモードに切り替わります。
ドラッグ&ドロップが必要なくなるので便利!
![](https://beeyanblog.com/wp-content/uploads/2019/11/30a57262d0ad989a63789ae22463ff4f-1024x554.png)
測定する範囲はドラッグ&ドロップで移動させることができます。
![](https://beeyanblog.com/wp-content/uploads/2019/11/f5fd616cef193be811a4cb0a2fccd2fe-1024x557.png)
バーの右端にある閉じアイコンで終了します。
おわりに
今回は、画面上のさまざまなサイズを簡単に測定できるGoogle Chromeの拡張機能Page Ruler Reduxを紹介しました。
お手本にしたいページのマージンやエレメントの大きさを測定するのによく使用しています。
![](http://image.moshimo.com/af-img/0866/000000029834.jpg)