概要

color プロパティは、HTML要素の文字色を指定するためのCSSプロパティです。

たとえば、見出し・段落・リンクなど、あらゆるテキストの色を変更する際に使われます。

基本的な使い方

See the Pen css colorについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

p {
  color: red;
}

このように書くと、すべての <p>（段落）タグ内の文字色が「赤色」になります。

出力される内容の例

実際のHTMLに反映すると、以下のような表示になります：

これは赤色の文字です。

<p style="color: red;">これは赤色の文字です。</p>

役割とメリット（定義リスト形式）

視認性向上

ユーザーの目を引きたい部分や、重要な情報を強調するのに適しています。

アクセシビリティ向上

背景とのコントラストを意識すれば、可読性が高まり、誰にとっても見やすいデザインになります。

デザインの統一

文字色を統一することで、サイト全体に一貫性が生まれ、プロフェッショナルな印象を与えられます。

注意点

• color はキーワード（例：red）のほか、#RRGGBB（例：#ff0000）、rgb() や hsl() といった形式でも指定できます。
• 文字色だけで情報を伝えると、色覚に障害のあるユーザーに正しく伝わらないことがあります。太字・アイコン・ラベルなどの併用が望ましいです。
• 背景色とのコントラストが不足していると、テキストが読みづらくなります。十分な色の差を確保しましょう。

まとめ

color プロパティは、CSSの中でも最も基本的かつ重要なプロパティの1つです。

文字の印象や可読性をコントロールするために、正しく活用することで、ユーザーにとって読みやすく、デザイン性の高いWebページが実現できます。