2021-06-21

【Google Chrome】デベロッパーツールで色の値を調べる方法

今回は、Google Chromeの「デベロッパーツールで色の値を調べる方法」について紹介します。

WEB制作では頻繁に色の値を確認する必要があるので、是非真似してみてください。

まずは、ページの上で「右クリック」して「検証」のメニューをクリックします。

次に、どこでもいいのでcolorプロパティを指定します。

色はなんでもいいのですが、今回はredを指定しました。

色が指定できたら、プロパティの横にある四角いボタンをクリックします。

すると以下のような画面になるので、スポイトのアイコンをクリックします。

そして、スポイトアイコンをクリックした状態で、色を調べたい箇所をクリックします。

すると、クリックした箇所の色の値を取得することが出来るでしょう！

まとめ

以上が、「デベロッパーツールで色の値を調べる方法」でした。

DOWNLOAD

ブログ用WordPressテーマを無料配布中

実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。

Webサイトの集客や導線設計でお悩みではありませんか？

当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。

課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。

Author：

Yujiro

Profile：

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。