【6日でできるHTML入門】CSSによる色指定

　Webページのデザインにおいて、「色」は情報を際立たせたり、雰囲気を演出したりする重要な要素です。CSSでは、色を名前で指定する方法に加え、16進数コードや関数（rgb()／rgba()）を使って自由に色を表現できます。「CSSによる色指定」では、光の三原色の仕組みから16進数の基礎、各種指定方法、そして実際に動作するサンプルまでを順に解説します。

１．光の三原色と16進数の基礎

1.1. 光の三原色

　コンピュータ上の色表現は、赤（Red）、緑（Green）、青（Blue）の三原色の組み合わせで行います。それぞれの成分は0～255の256段階で指定し、以下のような基本色が再現可能です。

R	G	B	色
255	0	0	赤
0	255	0	緑
0	0	255	青
255	255	255	白
0	0	0	黒
128	128	128	灰色
255	255	0	黄
255	0	255	紫
0	255	255	水色
255	165	0	オレンジ

1.2. 16進数とは？

16進数は1桁で0～15を表し、A～Fで10～15を示します。たとえば10進数の198は、

198 ÷ 16 = 12…6 → 16進数 → C6

のように商を上位桁、余りを下位桁に置く計算で求めます。

10進数	16進数	計算
7	07	7÷16=0…7
80	50	80÷16=5…0
115	73	115÷16=7…3
198	C6	198÷16=12(A〜F→C)…6
255	FF	255÷16=15(F)…15(F)

1.3. RGBの16進数表記

CSSでは、#RRGGBB の形式で色を指定します。たとえば (R=255,G=0,B=153) は #FF0099。

２．CSSでの色指定方法

2.1. 色名による指定

ファイル名： lesson12-1.html

<!-- lesson12-1.html ☕ -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カフェメニュー☕</title>
  <style>
    .title   { color: brown; }
    .note    { color: teal; }
  </style>
</head>
<body>
  <h1 class="title">アイスコーヒー ☕</h1>
  <p class="note">夏季限定の爽やかな味わい。</p>
</body>
</html>

ブラウザの出力例

見出しはブラウン、注釈はティールで表示されます。

2.2. 16進数コードによる指定

ファイル名： lesson12-2.html

<!-- lesson12-2.html 🧁 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スイーツ紹介🧁</title>
  <style>
    .choco { color: #8B4513; }   /* チョコレート色 */
    .berry { color: #D81B60; }   /* ベリー系ピンク */
  </style>
</head>
<body>
  <h1 class="choco">チョコレートケーキ</h1>
  <p class="berry">ベリームースケーキ</p>
</body>
</html>

ブラウザの出力例

見出しが濃いチョコレート色、本文がベリー系ピンクで表示されます。

2.3. 短縮形式（#RGB）

3桁表記では #123 が #112233 と解釈されます。

.light { color: #369; }  /* #336699 と同じ */

2.4. `rgb()`／`rgba()` による指定

ファイル名： lesson12-3.html

<!-- lesson12-3.html 🌈 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>虹の紹介🌈</title>
  <style>
    .red     { color: rgb(255,0,0); }
    .semi    { color: rgba(0,128,255,0.5); }
  </style>
</head>
<body>
  <p class="red">真っ赤な文字</p>
  <p class="semi">半透明の青</p>
</body>
</html>

ブラウザの出力例

1行目は純粋な赤、2行目は透過度50%の青で表示されます。

３．カラーチャート

代表的な16進数カラーをまとめました。

色名	16進数	rgb()
赤	#FF0000	rgb(255,0,0)
緑	#00FF00	rgb(0,255,0)
青	#0000FF	rgb(0,0,255)
黄	#FFFF00	rgb(255,255,0)
紫	#800080	rgb(128,0,128)
水色	#00FFFF	rgb(0,255,255)
オレンジ	#FFA500	rgb(255,165,0)
灰色	#808080	rgb(128,128,128)

まとめ

ここで扱った色指定の方法を整理します。

方法	記述例	用途
色名	`color: red;`	定義済みの17色を簡単に指定
16進数コード	`color: #FF00CC;`	好きな色を自由に指定
短縮形式	`color: #F0C;`	`#FF00CC` の3桁表記
`rgb()`	`color: rgb(255,0,204);`	10進数でRGBを指定
`rgba()`	`color: rgba(255,0,204,0.5);`	不透明度を含めた色指定 (0～1)

16進数や関数を使いこなし、思い通りの色表現でページを彩りましょう！

【6日でできるHTML入門】CSSによる色指定