CSS【font color】文字色の指定

フォントについてよく使われる設定として、文字色の指定があると思います。
キーワードとなる文字の色を変えることで、内容が分かりやすくなるなど、効果的な文字色の指定は、閲覧者がサイトのイメージを持つ上で重要な役割を担っています。
今回は、文字色の指定についてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

▶ 参考：

プログラマカレッジの評判や口コミを200件分析！無料の理由や違約金、適性検査も解説【エンジニア転職術】

最終更新日：2023年8月3日

1. colorプロパティ

文字色を指定する場合は、colorプロパティを使用します。

そして、文字色を指定する際には、背景色にも注意を払うことが必要です。
ユーザ環境で背景色が指定されている場合には、強調したくて選んだ文字色が目立たなくなったり、背景色と同化して文字が読めなくなったりすることがあるからです。

colorプロパティの値は「色」ですが、色について、次のように複数の指定方法があります。

16進数で指定	color: #FF0000; 色を、RGBの各値を2桁ずつ、16進数で表す方法 #FF0000のようにRGB各色の数値が同じである場合は、#F00と3桁に省略可
色の名前（Webカラーネーム）で指定	color: red; 色を、各ブラウザで設定されているカラーネーム（約140色）で表す方法
10進数で指定	color: RGB(255,0,0); 色を、RGBの値をそれぞれカンマ（,）で区切って10進数で表す方法
10進数で透明度も指定	color: RGBa(255,0,0,0.5); 色について、RGBの値のあとに「 0（透明）～1（不透明） 」の数値で透明度も表す方法
HSLで指定	color: hsl(0,100%,50%); 色相環での角度（ 0～359度 ）で色を、そのあと彩度と輝度を%で、カンマ（,）で区切って表す方法
HSLで透明度も指定	color: hsla(0,100%,50%,0.5); 色について、HSLの値のあとに「 0（透明）～1（不透明） 」の数値で透明度も表す方法
％で指定	color: RGB(100%,0%,0%);　または　color: RGBa(100%,0%,0%,0.5); 色を、RGBの値をそれぞれカンマ（,）で区切って％で表す方法

　
上記の色指定について、詳しくはHTML 【 色指定 】 ～ colorの指定方法をご参照下さい。
また、カラーサンプルは、HTML 【 色見本 】 ～ カラーチャートをご覧下さい。

▲目次へ戻る

2. font color 指定

ユーザ環境によっては、独自の背景色を設定している場合があるので、文字色を指定する際には背景色にも注意を払います。

文字色を赤に、背景色をライトグレイに指定すると、次のように表示されます。

文字色はcolorプロパティで、背景色はbackground-colorプロパティで指定します。

ソースは次の通りです。

■ CSS

p#sample {
	padding: 20px;
	color: red;
	background-color: lightgrey;
	}

■ HTML

<p id="sample">
  文字色はcolorプロパティで、背景色はbackground-colorプロパティで指定します。
</p>

　
キーワードなど、ある文字だけ特に強調させたい場合は、部分的に文字色を指定します。

文字色はcolorプロパティで、背景色はbackground-colorプロパティで指定します。

ソースは次の通りです。

■ CSS

p#sample {
	padding: 20px;
	background-color: lightgrey;
	}
p#sample span {
	color: red;
	}

■ HTML

<p id="sample">
  文字色は<span>color</span>プロパティで、背景色は<span>background-color</span>プロパティで指定します。
</p>

▲目次へ戻る

3. fontタグは非推奨

以前は、font要素というものが使用可能で、「<font color=”red”>赤</font>」のような形でも文字色を指定することができました。
しかし、HTML5からfontタグが使用不可となったため、fontタグは使用しない方が無難です。

HTML5で使用不可となった要素は他にもあります。
詳しくはHTML5 【 要素と属性 】２ ～ 変更された要素と属性をご参照下さい。
　
どうしてもHTML要素のタグ内で文字色を指定したい場合は、style属性を使って次のような指定方法があります。

<p style="background-color: lightgrey">タグ内でstyle属性を使って<span style="color:red">style="color:red"</span>のように指定します。</p>

上記の記述で、次のように表示されます。

タグ内でstyle属性を使ってstyle=”color:red”のように指定します。

ただ、デザインの変更等、後々の保守作業の煩雑さを考えると、CSSで指定した方が良いです。

▲目次へ戻る

4. Webカラーネーム一覧

色をカラーネームで指定すると、CSSコードを見ただけでどんな色か予想できるので便利です。
但し、色によってはブラウザの違い等、Web環境によって正しく表示できないこともあるので注意が必要です。

他のカラーサンプルについては、HTML 【 色見本 】～ カラーチャートをご覧下さい。

▲目次へ戻る