Webサイトにおいてテキストの色は、デザインや視認性を左右する重要な要素です。適切な文字色を設定することで、ユーザーにとって読みやすく、印象的なページを作成することができます。

この記事では、CSSでテキストの文字色を変更する基本的な方法について、初心者向けにわかりやすく解説します。

文字色を変えるには「color」プロパティを使う

CSSで文字の色を指定するには、colorプロパティを使います。基本的な構文は次のとおりです：

p {
  color: #333333;
}

この指定により、すべての<p>要素（段落）の文字色が濃いグレーに変更されます。

さまざまな色の指定方法

CSSでは、色をいろいろな形式で指定できます：

• 色名： red, blue, black など
• 16進数： #ff0000, #333333 など
• RGB： rgb(255, 0, 0)（赤）など
• RGBA： rgba(0, 0, 0, 0.7)（透明度あり）

たとえば、以下のように記述することで、赤色の文字にすることができます：

.red-text {
  color: red;
}

特定の要素だけ文字色を変える方法

クラスを使えば、特定の要素だけ文字色を変えることができます。例：

<p class="accent">この部分だけ色を変えたい！</p>

.accent {
  color: #e91e63; /* 鮮やかなピンク系 */
}

こうすることで、強調したい文章だけ色を変えて目立たせることができます。

背景色とのバランスを考慮する

文字色を変更するときに気をつけたいのが、背景色とのコントラストです。たとえば白い背景に薄い灰色の文字を使うと、視認性が下がってしまう可能性があります。

背景が暗い場合には、以下のように白文字を使うと読みやすくなります：

body {
  background-color: #222;
  color: #fff;
}

このように色の組み合わせによって、読みやすさや印象が大きく変わることを意識しましょう。

リンクの文字色も変更できる

リンクは通常、青色に設定されていますが、CSSでカスタマイズすることも可能です。

a {
  color: #2196f3;
  text-decoration: none;
}
a:hover {
  color: #1976d2;
}

このようにすれば、リンクの通常時とマウスホバー時の文字色を別々に設定できます。

レスポンシブ対応で色を変えることも可能

CSSのメディアクエリを使えば、画面サイズに応じて文字色を変えることもできます。

@media screen and (max-width: 768px) {
  body {
    color: #444;
  }
}

これにより、スマホなど小さな画面では文字を少し濃く表示して、読みやすさを確保できます。

まとめ

CSSのcolorプロパティを使えば、簡単にテキストの文字色を変えることができます。サイトの雰囲気に合わせて色を選び、背景とのコントラストやユーザーの読みやすさにも配慮することが重要です。

デザインの一部として文字色を活用し、より魅力的なWebページを目指しましょう！