HTMLで文章を書けるようになったら、次はいよいよデザインの番です。「この見出しを青くしたい」「この文章だけ赤くして目立たせたい」――そんな願いを叶えてくれるのがCSSの color プロパティです。
しかし、ただ色を変えるだけなら簡単ですが、プロの現場では「どの色の指定方法が最適か？」「どうすれば効率的に色を管理できるか？」という戦略が求められます。
本記事では、CSSで文字色を変える基本から、狙った場所だけをピンポイントで染める「セレクタ」の概念、そして現場で役立つカラー指定のテクニックまで、初心者がつまずきやすいポイントを徹底解説します。
CSSの基本ルール：「誰の」「何を」「どうする」
CSSを書くとき、常に意識すべきなのがこの3要素です。
- セレクタ（誰の）：HTMLのどの要素を変えるか
- プロパティ（何を）：色なのか、大きさなのか
- 値（どうする）：赤にするのか、20pxにするのか
文字色を変える場合、コードは以下のようになります。
/* セレクタ { プロパティ: 値; } */
p {
color: red;
}狙った場所を染める！「セレクタ」の基本3種
Webサイト全体が赤くなってしまわないよう、特定の部分だけを指定する方法をマスターしましょう。
要素セレクタ（タグ名で指定）
h1 や p など、タグ名に直接指定します。
- 特徴：サイト内の同じタグすべてに適用される。
- 実務のコツ：サイト全体の基本ルール（フォントの色など）を決める時に使います。
クラスセレクタ（名前をつけて指定）
HTMLに class=”text-red” のように名前をつけ、CSSでは . （ドット）から書き始めます。
- 特徴：好きな場所に何度でも使い回せる。
- 実務のコツ：現場で最も使われる方法です。「目立たせたい文字」など、特定の役割を持つ要素に使います。
IDセレクタ（固有の名前で指定）
HTMLに id="main-title" と名前をつけ、CSSでは #（ハッシュ）から書き始めます。
- 特徴：1ページに1回しか使えない。
- 注意点：優先度が強すぎて管理が難しくなるため、デザイン（装飾）目的での使用は避けるのが現代のプロのマナーです。
文字色の指定方法は3パターンある
CSSで色を指定する方法は、大きく分けて3つ。状況に応じて使い分けます。
カラーネーム（red, blue, orange など）
名前で指定する方法。直感的ですが、細かい微調整ができません。
- 用途：テストや練習でサクッと色を変えたい時。
16進数（#ff0000 など）
シャープと6桁の英数字で指定する方法。
- 用途：デザインツールから色をコピーする際の業界標準です。
RGB / RGBA（rgb(255, 0, 0) など）
赤・緑・青の光の三原色で指定します。
用途： rgba を使うと「透明度（Alpha）」を調整できるため、背景を透けさせたい時などに重宝します。
デザイナーさんからの指示書のときは、ほぼ100%で『16進数（#000000など）』で届きます。
文字色とセットで覚える「背景色」の基本
文字色（color）を変えたら、セットで調整したくなるのが背景色（background-color）です。この2つの組み合わせが、Webサイトの印象を決定づけます。
背景色を指定するプロパティ
背景色を変えるには、その名の通り background-color を使います。
/* セクション全体の背景を薄いグレーにする */
.section-box {
background-color: #f5f5f5;
color: #333333; /* 文字色とのコントラストを意識 */
}背景と文字の「視認性」はプロのこだわり
背景色を濃い色にした場合、文字色を明るくしないと全く読めなくなります。
- 悪い例: 黒背景に濃い青の文字（見えない）
- 良い例: 濃い紺色の背景に、白に近いグレーの文字（読みやすい）
実務では「色のコントラスト比」をチェックするツールを使い、誰もが読みやすい配色になっているかを確認するのが一般的です。
CSSの魔法「継承」とスタイルのリセット
CSSを書き進めると、「なぜこの要素に色を指定していないのに、色がついているの？」という現象に遭遇します。これがCSSの大きな特徴である「継承（インヘリタンス）」です。
親から子へ引き継がれるスタイル
文字色（color）などの一部のプロパティは、親要素に指定するとその中にある子要素にも自動的に適用されます。
/* body（親）に指定した色は、中のpやh1（子）にも引き継がれる */
body {
color: #555555;
}いちいち全てのタグに色を指定しなくて済む便利な仕組みですが、意図せず色が変わってしまう原因にもなります。
スタイルを上書きして制御する
継承された色を変えたい場合は、より具体的なセレクタ（クラスなど）で「上書き」をします。 「親の言うことは聞くけれど、自分専用のルールがあればそっちを優先する」というイメージです。この「継承」と「上書き」の仕組みを理解すると、CSSの記述量を劇的に減らすことができます。
CSSが効かない！を解決する「優先順位」
「コードは間違っていないのに、なぜか色が変わらない」……これは初心者が最もハマる罠、「優先順位（詳細度）」の問題です。
4-1. セレクタの強さランキング
CSSには、後から書いたものよりも「詳細に指定した方」を優先するルールがあります。
- id セレクタ（最強）
- class セレクタ（中）
要素セレクタ（弱）
4-2. 解決策：クラスを使い分ける
「基本は黒だけど、特定の場所だけ赤くしたい」という場合は、基本を要素セレクタ（p）で書き、変えたい部分だけにクラス（.alert）を適用します。これが、管理しやすい「美しいCSS」への近道です。
失敗しないための「カラーユニバーサルデザイン」
文字色を選ぶとき、忘れてはならないのが「読みやすさ（コントラスト）」です。
- 背景色との差を意識する: 白背景に薄いグレーの文字は、オシャレですが読みづらいです。
- 色だけに頼らない: 「エラーは赤」とするだけでなく、アイコンを添えたり太字にしたりすることで、色の見え方が異なるユーザーにも正しく情報を伝えられます。
デザイン重視だけでなく読みやすさも非常に重要になります。
実践演習：クラスを使って見出しをデザインする
実際に、HTMLとCSSを組み合わせてみましょう。
HTMLコード：
<h1 class="main-title">Webサイトへようこそ</h1>
<p>通常の文章は黒色です。</p>
<p class="highlight">ここだけ目立たせたい文章はオレンジ色になります。</p>CSSコード：
/* 全体の基本色 */
body {
color: #333333; /* 真っ黒より少しグレーにするのが目に優しいコツ */
}
/* クラス指定 */
.main-title {
color: #0055ff;
}
.highlight {
color: #ff8800;
font-weight: bold;
}
まとめ：色の力を使いこなそう
CSSで色を変えることは、Webサイトに「感情」を吹き込む作業です。
- セレクタを正しく使い、狙った場所だけを装飾する。
- 16進数（#）での指定に慣れ、プロの現場に対応する。
- 優先順位の仕組みを知り、「効かない！」というストレスをなくす。
まずは自分の好きな色を1つ選んで、自分のサイトの文字を染めてみてください。その瞬間に、あなたのHTMLは「文書」から「デザイン」へと進化します。
