Webサイトの画像サイズや位置を測れるツール「Page Ruler Redux」

「Page Ruler Redux」はWebサイトで表示されている画像のサイズや任意の位置を測ることができるChromeの拡張機能です。

Page Ruler Reduxの追加方法

ブラウザの拡張機能になります。以下のURLからブラウザに機能を追加できます。
Chrome(Page Ruler Redux)

Page Ruler Reduxの使い方

Page Ruler Reduxをブラウザに追加できましたら、ブラウザの右上にあるアイコンをクリックします。

ページ上部にバーが表示されます。
測定したい箇所をドラッグするとバーの中にサイズや位置の情報が反映されます。

画像やバナーなどのサイズを直接測定したい場合はバーの左にあるオレンジの「< >」アイコンをクリックします。

画像をクリックすることで測定することができます。

この記事を書いた人
Yoshida

株式会社グロウニッチの制作を担当している吉田です。Web制作に関する記事やちょっと気になったものを紹介します。

関連記事

ワンクリックでキャッシュが削除できるGoogle Chrome拡張機能「Clear Cache」
キャッシュデータは読み込みをサポートしてくれる機能ではあるものの、データが溜まっていくとパソコンの動作が遅くなりがちです。毎回、ブラウザの設定画面からキャッシュを削除しにいくのも面倒ですよね。もっと簡単にキャッシュを削除したい!そんな時に役に立つGoogle Chrome拡張機能が「Clear Cache」です。 webサイト制作時には修正や更新の確……
簡単!Google検索のカラーピッカー機能
Google検索から、Web制作などで役立つカラーピッカーを簡単に利用することが出来ます。 Google検索で「カラーピッカー」と検索するだけ 検索結果ページの一番上にカラーピッカーが表示されます ①色相で選びたい色のベースを選びます。②色の明度・彩度を決めます。③下部に表示されたカラーコードを確認します。 Goog……
Webサイトの気になるカラーコードを取得「ColorZilla」
Webサイトを見ている時に、サイトカラーや画像の中で使用されているカラーなど、気になる色のコードを取得できるのが「Colorzilla」です。 Colorzillaの追加方法 ブラウザの拡張機能になります。以下のURLからブラウザに機能を追加できます。・Chrome(Colorzilla)・Firefox(Colorzilla) Colo……
カラーコードの検索・抽出に便利なGoogle拡張機能「ColorPick Eyedropper」
ウェブサイト上などにある色のコードを抽出するにはChrome拡張機能の「ColorPick Eyedropper」がおすすめです。 「ColorPick Eyedropper」の使い方 ColorPick Eyedropperにアクセス。「Chromeに追加」をクリックします。 確認用のポップアップが出るので「拡張機能を追加」をク……