FireFoxのメジャー測定アドオン「Measure-it」のご紹介

シェアボタンを押して情報を共有しましょう。

スクリーンショット_120817_034031_PM

どうも、こんにちは。橋尾渡(@hashio_wataru)です。

今回は、Firefoxのブラウザ上で画像のサイズや文字のサイズなどを測定できる便利なアドオンを紹介していきたいと思います。

Firefoxのアップデートに伴って、以前使えていた「MeasureIt」が使えなくなり、現在では「Measure-it」となって新しく登場しました。

MeasureItの名前にハイフンが付いただけの新しいアドオンになりますね。古いアドオンを確認する場合は、こちらの記事をお読みください。

どうも、こんにちは。橋尾渡(@hashio_wataru)です。 今日、パソコンを再起動したんですよ。そしたら、FireFox...

この「Measure-it」というアドオンを使う事によって、Firefoxのブラウザ上で対象の幅をピクセル単位で計ることができるようになります。

187854

上図のように、縦幅と横幅がピクセル単位で表示されます。

Measure-itを使えば、HTMLやCSSを使ってウェブ制作をしている人に、とても役に立つはずです。そういったウェブ制作に関わっている人に、是非入れてほしいアドオンの一つですね。

それでは、これからMeasure-itのアドオンをFirefoxにインストールしていきましょう。

スポンサーリンク
レクタングル(大)広告

Measure-itをインストールする

まず初めに、Firefoxを起動しましょう。

Firefoxを起動できましたら、上記のサイトを開いてください。

スクリーンショット_121117_034532_PM

Measure-itアドオンのページが開いたら、右下にある「+Firefoxへ追加」というボタンを押してください。

WS000238_121117_042044_PM

次に、ブラウザの上部にポップアップが表示されますので、追加をクリックしましょう。

スクリーンショット_121117_045409_PM

最後に、アドオンマネージャーを開き、「Measure-it」がちゃんとインストールされているかを確認してください。

確認が終わりましたら、これでMeasure-itのインストール手順は終わりになります。

Measure-itの使い方

Measure-itのアドオンを、Firefoxに追加することができましたので、次は使い方の説明をしていきます。

とは、言ってもMeasure-itの使い方はとても簡単で、アドオンを起動してマウスのカーソルをドラッグアンドドロップさせるだけの簡単作業です(笑)

スクリーンショット_121117_052102_PM

アドオンを追加しますと、右上にメジャーのマークが表示されるようになり、これをクリックするとアドオンが起動します。

スクリーンショット_121117_055102_PM

Measure-itが起動すると、画面が薄暗くなりますので、あとはドラッグアンドドロップをして対象の幅を計るだけです。

右上に横幅のサイズが表示され、左下に縦幅のサイズが表示されます。この際、サイズはピクセル単位で計ることが可能です。

なお、Measure-itアドオンを終了したい場合は、「Esc」ボタンか、右上にあったメジャーマークをクリックすると、Measure-itが終了します。

終わりに

以上で、Measure-itのアドオンについて説明する記事は終わりになります。

以前使えていた、旧式のMeasureItアドオンの場合は、矢印キーなどでサイズを微調整することができましたが、今回のMeasure-itについては、このような動作がなくなっています

Use the following key combinations to fine tune your MeasureIt ruler box:
←→↑↓ Resize 1 pixel
SHIFT + ←→↑↓ Resize 5 pixels
CTRL + ←→↑↓ Nudge 1 pixel
SHIFT + CTRL + ←→↑↓ Nudge 5 pixels

矢印で微調整ができることは結構便利だったのですが、無くなってしまうと意外と不便なものですね(笑)

今後のアップデートで微調整ができるようになることを期待しましょう!

それでは、そろそろFirefoxのメジャー測定アドオン「Measure-it」のご紹介についての記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
この記事をお届けした
HASHIO_LOGの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事