スポイト機能だけじゃない"ColorZilla" : Firefoxアドオン
あけましておめでとうございます。あなたの魔神さんです。
お正月と言えば餅。餅の一番好きな食べ方はと聞かれたら、少し深めの皿に海苔、餅、バターと重ね、それに醤油を少々たらし、おもむろにレンジでチンする調理法だと答えます。
以前友人にこの調理法を披露したところドン引きされてから、今にいたるまで封印中。
さて、前回のWeb制作カテゴリ記事では、Web制作用Firefoxのプロファイルを設定しました。
下準備も終わったので、今回からこのプロファイルに載せるアドオンをWeb開発系中心に紹介していきたいと思います。
今回ご紹介するのは、ブラウザ画面から色を拾えるスポイトツール"ColorZilla"です。
index list
基本的な使い方
Webページを作っていると、ブラウザ画面から色を拾いたくなるときがよくあります。
こっちの画像の色をあっちのテキストでも使いたいとか、この青の数値いくつだったっけとか、そんな時にいちいち画像を開いて色数値を確認したりするのは面倒です。先生、ワタクシ正直もう面倒なんです。
そんなときこそ、このColorZillaの出番。
ColorZillaをインストールすると、ステータスバーに以下のようなスポイトアイコンが表示されます。
どこからどう見てもスポイト。
このアイコンを左クリックするか、スポイトショートカットキー(変更可)を押すと、マウスポインタの形が変わり、画面上から色を拾えるようになります。
色を拾いたいポイントでクリックすると、クリックしたピクセルの色数値がステータスバーに表示されます。
このとき、ColorZillaアイコンを右クリックすると表示されるコンテキストメニューから"採取した色情報を自動的にコピー"オプションを有効にしておくと、拾った色が選択した数値形式でクリップボードにコピーされるようになるので便利です。
WebPage DOM Color Analyzer
ColorZillaは単なるスポイトツールではありません。
2.0から追加された"WebPage DOM Color Analyzer"は、むしろこちらがメインなのではと思わせるほど強力な機能です。
ColorZillaアイコンを右クリックすると表示されるメニューからWebPage DOM Color Analyzerを選択すると、現在開かれているページで使用されている色をリストアップしてくれます。
こうして生成されたカラーパレットは、ColorZillaのパレットに保存したり(save as colorzilla palete)、colorzilla.comが提供するWebサービス上にパーマリンクを作成することができます(permalink)。
また、カラーチップをポイントすると、ブラウザ画面上でその色を使用している部分にボーダーを表示します。
カラーパレットの下には、それぞれの色がどのエレメントで使用されているかという情報がリストアップされます。
さらにそれぞれの項目の最後には、参照されているスタイルシートのソースを表示するリンクが張られていて、該当部分を確認することまでできるという気の利きよう。
Palete Browser
スポイトツールでサンプリングした色やAnalyzerで取得したカラーパレットは、ColorZillaのパレットに保存することができます。
これら保存した色を管理するのが"Palete Browser"で、他の機能と同じように、ColorZillaアイコンを右クリックすると表示されるメニューから呼び出すことができます。
Palete Browserでは、名前を付けて保存したカラーパレットや、過去にスポイトツールで拾った色の履歴などをリスト表示させることができます。
気に入った色を"Add to Favorites"からFavoritesパレットにまとめることができるのも、また便利な機能。
まとめ
WebPage DOM Color Analyzerで使用している色の一覧をリストアップし、Palete Browserで管理。
細かい調整にはスポイトツールが役立ちます。
ブラウザで表示確認をしながら、ページで使用されている色、その数値、指定されている要素の名前といった情報を得られるColorZillaは、Webサイトの配色計画や更新作業に大きく役立ってくれるツールだと思います。
興味のある方はぜひお試しになってみてください。
それではまた、魔神ハッピーアワーでお会いしましょう。
関連リンク
comments