「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 ウェブストア   Go Extensions

「Go Extensions」の使い方

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

記事を読む

Chrome ウェブストア   User Agent Switcher

「User-Agent Switcher」の使い方

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

記事を読む

Chrome ウェブストア   Page load time

「Page load time」の使い方

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

記事を読む

Chrome ウェブストア   PageSpeed Insights  by Google

「PageSpeed Insights」の使い方

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

記事を読む

Chrome ウェブストア   Utime

「Utime」の使い方

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

記事を読む

Chrome ウェブストア   Page Refresh

「Page Refresh」の使い方

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

記事を読む

Chrome ウェブストア   Enable Copy

「Enable Copy」の使い方

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

記事を読む

Chrome ウェブストア   PageRank

「PageRank」の使い方

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

記事を読む

Chrome ウェブストア   Link Checker

「Link Checker」の使い方

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

記事を読む

Chrome ウェブストア   WhatFont

「WhatFont」の使い方

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

記事を読む

PAGE TOP ↑