色鉛筆

ブラウザ(Chrome、Firefox)上からサイトの色(カラーコード)を確認する方法

ブラウザ上からサイトの色(カラーコード)を確認する方法

今回は、ブラウザ上(「Google Chrome」や「Firefox」)でサイトの色(カラーコード)を確認したい場合に便なアドオンを紹介します。

頻度は多くないですが、
何かしらのサイトを参考にしているときに「この部分のカラーコードは何?」ってなることが時々あります。

そのような場合に便利なアドオンです。

因みに、今回紹介するのは、利用頻度の高い「Firefox」と「Google Chrome」のアドオンのみです。
もし他のブラウザを使用されている場合には、自分で調べてみて下さい。

 

Firefoxでカラーコードを取得するアドオン

Firefoxの場合、「ColorZilla」というアドオンが便利です。

【ブラウザへの追加方法】
まず、Firefoxから「https://addons.mozilla.org/ja/firefox/addon/colorzilla/」へアクセスして下さい。
※もしくは、アドオンの検索画面に移動して「ColorZilla」を検索してみて下さい。

このような画面が表示されます。
Firefox「ColorZilla」のアドオン画面
あとは、この画面上から「+ Firefox へ追加」というボタンをクリックするだけなので、簡単にインストールできます。

【アドオンの使い方】
アドオンを追加すると、ブラウザの右上にスポイトのようなマークが表示されます。
「ColorZilla」のマーク

これをクリックしてみて下さい。

十字のマークが出てくるので、そのマークを特定の場所に移動させるだけで、使用されているカラーコードを確認できます。
こんな感じです。
「ColorZilla」の使い方

 

Google Chromeでカラーコードを取得するアドオン

Google Chromeの場合、「ColorPick Eyedropper」か「ColorZilla」というアドオンが便利です。

私のおすすめは「ColorPick Eyedropper」なので、今回はこちらのアドオンの使い方を紹介します。

【ブラウザへの追加方法】
まず、Google Chromeから「https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg」へアクセスして下さい。

このような画面が表示されます。
Firefox「ColorPick Eyedropper」のアドオン画面
あとは、この画面上から「Chrome に追加」というボタンをクリックするだけなので、簡単にインストールできます。

【アドオンの使い方】
アドオンを追加すると、ブラウザの右上にカラーピッカーのようなマークが表示されます。
「ColorPick Eyedropper」のマーク

これをクリックしてみて下さい。

十字のマークが出てくるので、そのマークを特定の場所に移動させるだけで、使用されているカラーコードを確認できます。
こんな感じです。
「ColorPick Eyedropper」の使い方

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

【2,000円OFF キャンペーン実施中】↓

最近の記事

  1. WP:WordPress(ワードプレス)
  2. 色鉛筆
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. 文系と理系のメリットとデメリット
  7. 東京駅
  8. 残業
  9. プログラマーになるのに年齢は関係ある?
  10. 年収(収入)
【2,000円OFF キャンペーン実施中】↓

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

ConoHa WING 2周年キャンペーン中

アーカイブ

PAGE TOP