こんにちは!Webデザイナーのsameです。

本日は皆さまにwebデザインをする上で便利なアドオン(拡張機能)「Colorzilla」をご紹介します。
この機能、デザインをする上で参考にしたいwebページの色味の値が簡単に拾えてしまうのです。

<strong>■使い方</strong>
アドオンをインストール
・<a href=”https://addons.mozilla.org/ja/firefox/addon/colorzilla/” target=”_blank”>Colorzilla(firefox)</a>
・<a href=”https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja” target=”_blank”>Colorzilla(Chrome)</a>

スポイトのアイコンをクリックし、拾いたい色へカーソルを移動するとRGBなど色の情報が表示されます。
クリックするとカラーコードがコピーされます。CSSで使用したい場合はそのままペーストでOKです!
<img src=”https://www.aag.co.jp/wp-content/uploads/2017/01/color_img1-1.jpg” alt=”color_img1″ width=”600″ height=”229″>

拾った色味は「Color Picker」に履歴が残り、調整することもできますし、
「Webpage Color Analyzer」を使用すれば気になる色味のサイトの色解析も可能です。
<img src=”https://www.aag.co.jp/wp-content/uploads/2017/01/color_img2_-1.jpg” alt=”color_img2_” width=”600″ height=”382″>

今までスクリーンショットを撮ってPhotoshopで確認していた方は是非試して頂きたいです♪