HTMLで文章を書いたあと、「文字の色はどこで変えるの？」「指定したのに色が変わらない」と迷うことがありますよね。文字色はHTMLのタグではなく、基本的にCSSのcolorプロパティで設定します。
たとえば、color: #1d4ed8;と書くと文字を青色にできます。HTMLにはクラス名を付け、CSSはstyle.cssへ分けて書く方法が、あとから修正しやすくおすすめです。
この記事では、文字全体と一部分の色を変える方法、色の指定形式、CSSが反映されない原因、読みやすい配色の考え方まで、実際の表示結果と一緒に解説します。
HTMLの文字色はCSSのcolorで変える
まずは基本の形を試しましょう。次の例では、お知らせを囲む要素へ青色を指定しているため、中の見出しと文章がどちらも青色になります。
index.htmlのbodyタグ内へ次のHTMLを記述します。色を変える範囲へmessageというクラス名を付けてください。
<section class="message">
<h1>お知らせ</h1>
<p>この文章は青色で表示されています。</p>
</section>次に、style.cssの末尾へCSSを追加します。先頭のピリオドを含む.messageが、HTMLのclass="message"に対応します。
.message {
padding: 32px;
color: #1d4ed8;
background-color: #eff6ff;
border-left: 7px solid #3b82f6;
border-radius: 12px;
}colorは文字など前景の色、background-colorは背景色です。この2つを混同すると、「背景だけ変わって文字が変わらない」という状態になります。
文章の一部分だけ色を変える
文章の一部分だけ色を変えたい場合は、対象の文字をspan要素で囲みます。spanは、それ自体に特別な意味を追加せず、文章の一部をCSSの対象にするときに使える要素です。
index.htmlで、色を変える「本日17時まで」だけをspanで囲みます。開始タグと終了タグの位置を間違えると、想定より広い範囲の色が変わるので確認してください。
<p class="sentence">
受付は<span class="accent">本日17時まで</span>です。
</p>style.cssへ次のCSSを追加します。重要な情報なので、色だけでなくfont-weightでも強調しています。
.sentence {
padding: 32px;
background-color: #f8fafc;
border: 1px solid #d9e2ee;
border-radius: 14px;
}
.accent {
color: #c2410c;
font-weight: 700;
}意味として重要な箇所なら、spanではなくstrong要素を選ぶこともできます。HTMLでは内容の意味を決め、CSSで色や太さを整える、と役割を分けましょう。
CSSを記述する3つの場所
文字色を指定するCSSは、外部CSS、styleタグ、style属性の3か所へ書けます。どれも表示できますが、使いやすさが異なります。
| 書き方 | 記述場所 | 向いている場面 |
|---|---|---|
| 外部CSS | style.css | 通常のWeb制作。複数ページで管理しやすい |
styleタグ | index.htmlのhead内 | 1ページだけの小さな検証 |
style属性 | HTMLタグの中 | 一時的な動作確認 |
外部CSSへ書く方法
通常はHTMLとCSSを別ファイルに分けます。index.htmlのheadタグ内で、style.cssを読み込んでください。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字色の練習</title>
<link rel="stylesheet" href="style.css">
</head>HTMLファイルとCSSファイルが同じフォルダにある場合は、href="style.css"で読み込めます。フォルダが違う場合は、実際の配置に合わせてパスを変更します。
styleタグへ書く方法
1つのHTMLファイルだけで試したい場合は、headタグ内のstyleタグへCSSを書けます。
<head>
<meta charset="UTF-8">
<style>
.message {
color: #1d4ed8;
}
</style>
</head>style属性へ書く方法
style属性なら1つの要素へ直接指定できます。ただし、同じ指定が増えると修正しにくいため、完成するサイトでは外部CSSへまとめましょう。
<p style="color: #1d4ed8;">青色の文章です。</p>古い<font color="red">のような書き方は使用しません。現在は、HTMLで文章の意味と構造を作り、色はCSSで指定します。
文字色を指定する4つの形式
CSSの色は、色名、16進数、RGB、HSLなどで指定できます。次の表示は、4つの書き方で同じroyalblueを指定した例です。
index.htmlへ4つの要素を用意します。クラス名を分けることで、それぞれ異なる形式の色指定を試せます。
<p class="keyword">色名：royalblue</p>
<p class="hex">16進数：#4169e1</p>
<p class="rgb">RGB：rgb(65 105 225)</p>
<p class="hsl">HSL：hsl(225 73% 57%)</p>.keyword {
color: royalblue;
}
.hex {
color: #4169e1;
}
.rgb {
color: rgb(65 105 225);
}
.hsl {
color: hsl(225 73% 57%);
}- 色名：
redやroyalblueのように名前で指定します。手軽ですが、細かな調整には向きません。 - 16進数：
#RRGGBBの6桁で赤・緑・青を表します。デザインデータとの受け渡しでよく使われます。 - RGB：赤・緑・青を数値で指定します。
rgb(65 105 225 / 70%)のように透明度も追加できます。 - HSL：色相・彩度・明度で指定します。同じ色味の明るさを調整するときに理解しやすい形式です。
初心者のうちは、デザインツールからコピーしやすい16進数から始めると扱いやすいでしょう。プロジェクト内で形式を揃えると、コードも読みやすくなります。
親要素の文字色は子要素へ引き継がれる
colorプロパティは基本的に継承されます。親要素へ色を指定すると、子要素に別の色がなければ同じ色で表示されます。
<article class="news">
<h2>新着情報</h2>
<p>見出しも文章も親要素の色を引き継ぎます。</p>
<p class="note">この文章だけ別の色です。</p>
</article>.news {
color: #334155;
}
.news .note {
color: #b45309;
}意図しない色になったときは、対象の要素だけでなく親要素のCSSも確認してください。ブラウザの開発者ツールで「Computed（計算済み）」のcolorを見ると、どの規則から色を受け取ったかを調べられます。
文字色が変わらないときの確認項目
style.cssをlinkタグで正しく読み込んでいるか- HTMLの
classとCSSのセレクター名が一致しているか - CSSのプロパティ名を
colorと書いているか - 色の値の後ろにセミコロン
;があるか - より優先度の高いCSSで上書きされていないか
特に多いのは、クラス名の打ち間違いとCSSファイルのパス違いです。修正後も変わらない場合は、ブラウザを再読み込みし、必要ならキャッシュを無視した再読み込みも試してください。
読みやすい文字色を選ぶ
文字色は好みだけでなく、背景との明るさの差も大切です。次の比較では、白背景に薄いグレーを置いた左側より、濃いグレーを置いた右側のほうが読み取りやすくなっています。
WCAG 2.2では、通常サイズの文字は背景とのコントラスト比を4.5:1以上にする基準が示されています。大きな文字には3:1以上という例外がありますが、本文は4.5:1以上を目安に確認しましょう。
body {
color: #374151;
background-color: #ffffff;
}また、エラーを赤、成功を緑だけで区別すると、色の違いを認識しづらい人へ情報が伝わらないことがあります。「エラー」「完了」の文字やアイコンも組み合わせてください。
リンクの文字色を状態ごとに変える
リンクは通常時だけでなく、マウスを重ねたときやキーボードで選択したときも分かるようにします。色だけに頼らず、下線やアウトラインも残すと操作しやすくなります。
a {
color: #1d4ed8;
text-decoration: underline;
text-underline-offset: 0.2em;
}
a:hover {
color: #1e40af;
}
a:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}:hoverはマウスを重ねた状態、:focus-visibleは主にキーボード操作でフォーカスが見える状態です。どちらもクリックできる場所を利用者へ伝えます。
文字色と一緒に枠線の色も整える
お知らせや注意書きでは、文字色に合わせて背景色や枠線も整えると情報のまとまりが分かりやすくなります。枠線の種類、太さ、色の指定方法は次の記事で詳しく解説しています。
HTMLの文字色まとめ
HTMLの文字色は、CSSのcolorプロパティで変更します。通常はHTMLへクラス名を付け、外部のstyle.cssに色をまとめると管理しやすくなります。
一部分だけ変えるときはspanや意味に合う要素を使い、色名・16進数・RGB・HSLからプロジェクトに合う形式を選びましょう。最後に背景とのコントラストと、色以外でも情報が伝わるかを確認すれば、見やすく扱いやすい文字色を設定できます。