2018/09/28僕がサイト作るときには、色使いが上手な人の配色を勉強させていただくことが多いです。今日はサイト上の色を簡単に拾うことができるカラーピッカーの機能拡張「ColorZilla」を紹介します。WEBデザイナーならすでに知って使ってる人も多いと思いますが、WEBに関して詳しくないブロガーさんなどにおすすめしたい機能拡張です。Chromeの機能拡張で、カーソルが合った場所の色を拾うことができます。Chromeでは「エクステンション」という言い方をしますが、このエントリー内ではブラウザごとの言い回しの使い分けが面倒になるので「機能拡張」という言い方で統一します。昔はChromeのColorZillaがいまいちだったんですが、久しぶりに使ったらFirefoxと同じ使い勝手になってました。ダウンロードはこちらから。▼まずは設定をしましょう。clipboard.」にチェックを入れます。その他の項目も僕はチェックは全部入れてますがお好みで。▼コピーする形式も選べます。僕はシャープなしの16進法で小文字表記。▼ここまで設定しておけば使い方は簡単。アイコンをクリックすると発動します。Active」を一度クリックしましょう。一回クリックしておけば次回からはアイコンをクリックするだけで発動します。▼あとは拾いたい色にカーソル合わせてクリックするだけ。これでクリップボードにコピーされてるので、そのままテキストエディタでペーストすればおっけー。Picker機能もついてます。ここで直感的に色を調整することができます。Pickerを選びます。▼ここでRGB値を指定することもできるし、さっきコピーしたRGB値を入れて調整することもできます。良さそうな配色のサイトを見つけたら一発で色解析をする方法もあります。Analyzerを選びます。▼こんな具合にだいたいの配色が分かります。注意したいのは、写真なども含めた色が入ってしまうようなので、正確なものではないこともあること。ピンポイントで色を拾って解析した方が確実だと思います。CSS3のグラデーション用ジェネレーターちなみに、以前に紹介したCSS3のグラデーションのソースを作れるジェネレーターもColorZillaのサービスの一つです。Generator」をクリックすればそのサイトに飛べます。▼詳しい使い方はこちらを参照してください。Picker」ColorZillaじゃない機能拡張もご紹介。Picker」というそのまんまの名前の機能拡張で、最近までメインで使ってました。Picker▼カーソルが合ってるところが虫眼鏡のように拡大するので細かいところの色を取るのに便利です。ColorZillaとはケースバイケースで使い分けするといいと思います。最後にColorZillaはFirefoxの「アドオン」という概念を知った頃に真っ先に入れた機能拡張で、いまだにずっと使い続けてます。超便利なので、知らなかった方は是非試してみてください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。関連する記事をランダム表示WEBデザインfloatによる回り込みを解除する方法の1つ「clearfix」についてWEBデザインfontタグ使ってる人はもう使うのやめようWEBデザインCSS初心者ブロガーに捧げる!超簡単なCSS書き方講座WEBデザインhタグの中にstrongとか入れてる人は気をつけて!h1,h2,h3タグなどの正しい使い方WEBデザインの記事をもっと読む新着記事エンタメモーニング娘。ハマった理由と、EDM路線になってからのモーニング娘。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。