[アドオン不要] Firefoxで選択した部分のカラーコードを簡単に調べる方法
なにげなくサイトをブラウジングしていて「これ、何て色だろ？」とか「この色の組み合わせいいな、自分のサイトでも使ってみたい」と思う事はありませんか？
そんな時に使用しているブラウザがFirefoxなら、アドオン無しで知りたい部分のカラーコードを簡単に調べる方法があります。
Firefoxでカラーコードを取得する方法
当エントリーで紹介する方法は最新版のFirefoxを使用した手順になりますが、かなり以前のバージョンからある機能なので基本的にはそれほど変わらないはずです。
まずはFirefoxでカラーコードを調べたいサイトを開き、ツールバーから > > を選択します。
するとカーソルが虫眼鏡的な形状に変化するので、これを調べたい部分に持っていきます。中央に見える点のような部分がスポイトのカーソルで、その下にカーソル位置のカラーコードが表示されているのがわかるでしょうか？
拡大表示された部分を確認しながらピクセル単位でポイントを選択出来るので、OKならマウスをクリックするかキーボードのEnterキーを押すと、取得したカラーコードがクリップボードにコピーされます。
カラーコードをコピーすると一旦このモードは解除されますが、途中でページをスクロールさせたり作業を中断したいなどの理由で、任意にこの状態を解除したい場合はEscキーを押します。
カーソルでも操作出来ます
指定したいポイントがあまりにも微妙過ぎてマウスで選択するのは難易度が高いという場合は、カーソルキーで操作する事も出来ます。普通にカーソルキーだけ押すと1px、Shiftキーを押しながらだと10px分の移動になるので巧く使い分けて下さいね？
参考スポイト | キーボードショートカット一覧 | 開発ツール
画像からもカラーコードが取得可能です
CSSによって設定された背景や文字の色だけでなく、写真やイラストなどの画像からもカラーコードを取得する事が可能です。最初にイメージとなる画像があって、その画像に合わせたカラースキームでサイトを作成したい場合などに利用出来るのではないでしょうか。
Firefox 開発ツールのスポイト機能でした
自分で運営しているサイトのカスタマイズなどをされないような方には、知らない機能の多いFirefoxの開発ツールですが、インストールするアドオンが増えれば当然その分だけ動作も重くなるので、このようなちょっとした機能がアドオンに頼らなくても利用できるというのは嬉しいですね。