「Page Ruler」の使い方

公開日: : 最終更新日:2014/08/04 デベロッパーツール ,

拡張機能「Page Ruler」の使い方を紹介します。

Page Rulerとは

Page Rulerは、ウェブページの要素などのサイズを測定できる機能です。

Page Rulerのインストール

Chrome ウェブストア   Page Ruler

拡張機能追加

Page Rulerの使い方

インストールが終わると、ブラウザ右上にアイコンが追加されます。

N2j09J1d2um29dm2

アイコンをクリックすると、上部にバーが表示されます。

適当に範囲を指定してみます。

qI93nH3kdn2kd2kd2

左から順番に、横幅/縦幅/左辺の位置/上辺の位置/右辺の位置/下辺の位置を表示しています。

バー右側にある↓をクリックするとバーを下に移動することができます。

今度は、バー左端にある<>アイコンをクリックします。

すると、要素を指定できるようになります。

試しに画像を指定してみます。

すると、このように表示されます。

j2jd92kd2nck2me2d

オプションから少し設定ができます。

アイコンを右クリックし、オプションをクリックします。

もしくは、メニューからツール→拡張機能を選択し、オプションをクリックします。

すると、このような画面が開きます。

N2ikdj2km2dk2lkd

 

「Send Anonymous Usage Statistics」

チェックをいれると、匿名で使用情報を送るようになります。

チェックをいれると、アップデートタブを表示しなくなります。

個人的感想

とても便利な機能です。

要素ごとの幅が調べられるのも便利ですが、特に余白などの調整にとても便利d

  • このエントリーをはてなブックマークに追加
  • Pocket

関連記事

Chrome ウェブストア   Utime

「Utime」の使い方

拡張機能「Utime」の使い方を紹介します。 Utimeとは Utimeは、日付をUNIXt

記事を読む

Chrome ウェブストア   Zoom

「Zoom」の使い方

拡張機能「Zoom」の使い方を紹介します。 Zoomとは Zoomは、簡単にウェブページを拡

記事を読む

Chrome ウェブストア   PageSpeed Insights  by Google

「PageSpeed Insights」の使い方

拡張機能「PageSpeed Insights」の使い方を紹介します。 PageSpeed I

記事を読む

Chrome ウェブストア   Page load time

「Page load time」の使い方

拡張機能「Page load time」の使い方を紹介します。 Page load timeと

記事を読む

Chrome ウェブストア   WhatFont

「WhatFont」の使い方

拡張機能「WhatFont」の使い方を紹介します。 WhatFontとは WhatFontは

記事を読む

Chrome ウェブストア   User Agent Switcher

「User-Agent Switcher」の使い方

拡張機能「User-Agent Switcher」の使い方を紹介します。 User-Agent

記事を読む

Chrome ウェブストア   Link Checker

「Link Checker」の使い方

拡張機能「Link Checker」の使い方を紹介します。 Link Checkerとは L

記事を読む

Chrome ウェブストア   Page Refresh

「Page Refresh」の使い方

拡張機能「Page Refresh」の使い方を紹介します。 Page Refreshとは P

記事を読む

Chrome ウェブストア   Enable Copy

「Enable Copy」の使い方

拡張機能「Enable Copy」の使い方を紹介します。 Enable Copyとは Ena

記事を読む

Chrome ウェブストア   Clear Cache

「Clear Cache」の使い方

Clear Cacheの使い方を紹介します。 Clear Cacheとは Clear Cac

記事を読む

PAGE TOP ↑