Google ChromeでWebページのカラーコードを調べる方法です。
Chromeのデベロッパーツール（開発者ツール）を使えば簡単にカラーコードを調べることが出来ますが、より詳細に調べたいなら「ColorPick Eyedropper」という拡張機能がおすすめです。
Chromeでサイトに使用されている背景色や文字色などを調べたい時にどうぞ。
拡張機能を使えばマウスオンした部分のカラーコードが表示できます。
この記事の目次
Chromeでカラーコードを調べる方法
ChromeでWebサイトに使用されている「#000000」といったカラーコードを調べる方法をまとめました。自サイトの色コードチェックのみならず、他サイトに使用されている色を真似したいと思った時に便利な方法です。
この記事ではカラーコードの調べ方として、以下の２つをご紹介します。
- Chromeのデベロッパーツールで調べる
- Chromeに拡張機能をインストールして調べる
サイト要素の大部分はブラウザの開発者ツールで調べられますが、背景色など中にはカラーコードを取りにくい部分も存在します。
そんな時は「ColorPick Eyedropper」というChromeの拡張機能をインストールすることで、要素の領域に関係なくマウスオンした部分のカラーコードをリアルタイムに表示することが出来ます。
では早速それぞれのやり方を見ていきましょう・ｗ・
デベロッパーツールでカラーコードを調べる
Chromeのデベロッパーツール（開発者ツール）を使う方法は早くて楽です。
標準装備されている機能の１つなので何もインストールすることなく、すぐに起動できるというところも魅力です。
サイト上のほとんどの部分のカラーコードはこの方法で十分調べることが出来ます。
参考
今回はChromeですが、EdgeやFirefoxにも同じ機能があります。
やり方
まずChromeのデベロッパーツールを起動します。
1.デベロッパーツールを起動する
サイトの何もないところで右クリックし、Chromeのメニューから「検証」を押せばデベロッパーツールが起動します。
2.ページ内の要素を選択して検査（）を押す
続いて画面右上にあるアイコン（）を押します。
これでマウスオンした要素の検査が出来ます。
3.調べたい要素にマウスを当てる
あとはカラーコードを調べたい部分にマウスを当てます。
するとその要素のカラーコードが表示されます。
（そのままクリックすればCSSのチェックができるので、これを見てもOK！）
初めのうちは少し分かりにくいですが、使っているうちに慣れてくると思います。
ただ、この方法では背景色（background-color）など一部のカラーコードを調べたい時にCSSの知識が少し必要だったりします。
分からない方は次の方法でChromeに拡張機能をインストールすればOK！
拡張機能を使ってカラーコードを調べる
Chromeに「ColorPick Eyedropper」という拡張機能をインストールすれば、調べたい部分にマウスを当てるだけでカラーコードを表示出来るようになります。
「ColorPick Eyedropper」はマウスオンした部分のカラーコードをスポイトのような感じで表示＆取得してくれる便利な拡張機能です。
やり方
まずはChromeに「ColorPick Eyedropper」をインストールしましょう！
ColorPick EyedropperをChromeに追加する
上のリンクからChromeウェブストアにアクセスし、ColorPick Eyedropperのページが開いたら「Chromeに追加」を押してインストールします。
拡張機能の固定について
この拡張機能はアイコンをクリックして起動するものなので、今後よく使いそうな方はメニューに固定しておくと便利です。
拡張機能をメニューに固定する
拡張機能を固定するには画面上部の「ピースアイコン」を押し、拡張機能一覧が開いたら「押しピンマーク」を押せばOK！
ColorPick Eyedropperの使い方
インストールが済んだら早速「ColorPick Eyedropper」を使ってカラーコードを調べてみましょう！
アイコンを押せば起動する
「ColorPick Eyedropper」は拡張機能のアイコンをクリックすれば起動します。
ポイント
完全起動するまでほんの少し時間がかかるかもしれません。
マウスオンした部分のカラーコードが表示される
起動したら後はカラーコードを調べたい部分にマウスを当てるだけでOK！
マウスオンしている部分のカラーコードが16進数値とRGB値で表示されます。
マウスがある部分は拡大表示されますので、細かい部分のカラーコードを読み取ることが出来るようになっています。
カラーコードはその場でコピー可能
マウスを当てた部分をクリックすれば、カラーコードをコピーすることも出来ます。
カラーピッカーのスポイトのような機能で便利ですね！
なおカラーコードの横にあるアイコンから設定変更も可能ですが、デフォルトの設定で十分ですので設定については省略します。
まとめ
以上、ChromeでWebサイトに使われているカラーコードを調べる方法でした。
デベロッパーツールの機能だけでも十分調べることが出来ますが、要素内にある部分のカラーコードを詳細に調べたいならColorPick Eyedropperが便利です。
当サイトでは背景色が本当に「#ffffff」に設定できているかどうかを確認する時にこの拡張機能にお世話になりました・ｗ・
