画面上(ブラウザ上)の長さを測定する方法

「あれ~、このサイトのここの幅って、いくつだっけ?」

いろいろサイトを運営していると、
いちいち横幅なんて覚えていないので、
めいっぱい大きな写真を載せたいときなどに、
大きさ設定に困ります。

で、そんなとき、
画面上(ブラウザ上)で幅や長さが測れたらいいのに
と思っていたんですが、ありました。

Firefox アドオン – ColorZilla
https://addons.mozilla.jp/firefox/details/271

↑このアドオン、もともとは、サイトの中の
色の数値(#FF0000などの6桁のやつ)を
簡単に調べるためのものなんですが、
距離測定の機能もついているので、重宝します。

Firefoxにインストールすると、左下に、こんなふうに出ます。
colorzilla

スポイトの部分を左クリックすると、カーソルが十字に変わり、
色を調べたい位置を指定できるようになります。

表示は、左から

「RGB値」、「16進数値」、「最後に色情報を取得した場所からの位置」、
「タグ要素のclassとidの名前」です。
(オプションのステータスバーの表示で表示内容の変更も可能)

ですので、実際に二点間の距離を測る方法としては、

1.開始点で一度、色を調べる(=開始点の設定)
2.終了点で色を調べる

これで、表示を見ると、
Xが横の距離、Yが縦の距離を示している、

というわけです。

色情報の取得も便利なので、
ぜひ使ってみてくださいね。

コメントを残す

サブコンテンツ

このページの先頭へ