カラーコードを素早く確認できる!FireFoxアドオン[ColorZilla]なんで今まで使わなかった・・・

公開日:  最終更新日:2015/10/24

なんで今まで使わなかった・・・FireFoxアドオン[ColorZilla]カラーコードはこれでOK
カラーコードを調べたい時って皆さんどうしてますか?サイトのHTML、CSSの作成、編集をする際にはあらゆる場面で色を指定する場面に遭遇します。どんな感じの色にしようかなと考えて赤色系、青色系、黄色系といったなんとなく色は思いついているけどソース上で指定するにはカラーコードを記述する必要があります。

私の場合は、カラーコードを確認する時は、カラーコードを確認できるサイト
WEBカラーリファレンス
WEB色見本原色大辞典
で確認するか、もしくは、HP作成ソフトなどで確認していました。

この度、色に関する便利なツールを使う機会があったので紹介したいと思います。Webデザイナーさんなら、こういったツールは当然のごとく使ってるでしょうが実際使ってみて、なんで今まで使わなかったのか・・・・というのが正直な感想です。

スポンサードリンク

ColorZillaを使えば色に関する手間削減出来るよ

57-1.png
本日紹介するのはFireFoxのアドオンでカラーコードを簡単に確認できます。
FireFox アドオン ColorZilla
(Chrome版もあるみたいです)

カラーコードを確認するだけではなく、色に関する便利な機能が用意されているので入れておいて損はありません。

上記サイトからFireFoxにプラグインを追加すると↓↓のようなボタンがインストールすると追加されます。
57-7.gif
↓↓はメニュー → ツール から表示した状態
57-6.gif

カラーピッカーをすぐに表示できる

カラーピッカー画面が表示されて、色を確認できます。
色を選択してOKをクリックするとクリップボードにカラーコードがコピーされます。
57-2.gif

カラーパレット

カラーパレットでの表示も出来るみたい。
色を選択してOKをクリックするとクリップボードにカラーコードがコピーされます。
57-3.gif

スポイト

スポイトを選択すると、マウスカーソルが十字に変わります。
そして、表示しているページでマウスカーソルを動かすとカーソルをあてた部分の
カラーコードが表示されクリックするとクリップボードにカラーコードがコピーされちゃいます。
57-4.gif
表示しているサイトで、色使いとか良いなーって思った時に、すぐにカラーコードが確認出来るのは便利ですねー

グラデーションCSSのジェネレーター

CSS Gradient Generatorを選択すると
グラデーション表示をするCSSを生成できるサイトに移動できます。
グラデーションのパターンを選択
57-2.png
各種設定等で微調整をすると
↓↓プレビュー表示と生成されたCSSを確認することが出来ます。
57-3.png

表示しているページの色解析

Webpage DOM Color Analyzer を選択すると、表示しているサイトで使われている色を
解析して一覧表示してくれます。
こんな感じ↓↓↓
57-5.gif
ECサイトを運営していく上で、デザイナーさんがいる場合は、カラーコードを自分で調べることはあまりないかもしれませんが、自分で色を調整する機会も少なからずあるかと思います。

また、良いなーと思うサイトを見つけた際など配色の参考にする時に役に立つツールですね。ぜひ、活用してみてください。


色・配色関連については別記事も参考にしてみてください。
配色に関するツール知っていると便利な10個を用途別にまとめてみた

ショップページの配色をチェック出来るWebサービス「Colours」




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑