コンテンツ
ブラウザ上からサイトの色(カラーコード)を確認する方法
今回は、ブラウザ上(「Google Chrome」や「Firefox」)でサイトの色(カラーコード)を確認したい場合に便なアドオンを紹介します。
頻度は多くないですが、
何かしらのサイトを参考にしているときに「この部分のカラーコードは何?」ってなることが時々あります。
そのような場合に便利なアドオンです。
因みに、今回紹介するのは、利用頻度の高い「Firefox」と「Google Chrome」のアドオンのみです。
もし他のブラウザを使用されている場合には、自分で調べてみて下さい。
Firefoxでカラーコードを取得するアドオン
Firefoxの場合、「ColorZilla」というアドオンが便利です。
【ブラウザへの追加方法】
まず、Firefoxから「https://addons.mozilla.org/ja/firefox/addon/colorzilla/」へアクセスして下さい。
※もしくは、アドオンの検索画面に移動して「ColorZilla」を検索してみて下さい。
このような画面が表示されます。
あとは、この画面上から「+ Firefox へ追加」というボタンをクリックするだけなので、簡単にインストールできます。
【アドオンの使い方】
アドオンを追加すると、ブラウザの右上にスポイトのようなマークが表示されます。
これをクリックしてみて下さい。
十字のマークが出てくるので、そのマークを特定の場所に移動させるだけで、使用されているカラーコードを確認できます。
こんな感じです。
Google Chromeでカラーコードを取得するアドオン
Google Chromeの場合、「ColorPick Eyedropper」か「ColorZilla」というアドオンが便利です。
私のおすすめは「ColorPick Eyedropper」なので、今回はこちらのアドオンの使い方を紹介します。
【ブラウザへの追加方法】
まず、Google Chromeから「https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg」へアクセスして下さい。
このような画面が表示されます。
あとは、この画面上から「Chrome に追加」というボタンをクリックするだけなので、簡単にインストールできます。
【アドオンの使い方】
アドオンを追加すると、ブラウザの右上にカラーピッカーのようなマークが表示されます。
これをクリックしてみて下さい。
十字のマークが出てくるので、そのマークを特定の場所に移動させるだけで、使用されているカラーコードを確認できます。
こんな感じです。
この記事へのコメントはありません。