6日でできる新HTML入門｜CSSによる色指定

色の仕組みを理解すると、CSSでページの印象を自由に変えられるようになります。

Webページのデザインでは、色がとても大切な役割を持っています。見出しの文字色を変えるだけでも、ページの雰囲気は大きく変わります。注意書きを目立たせたり、商品やサービスのイメージに合わせた色を使ったりすることで、情報をより分かりやすく伝えられます。

CSSでは、文字色や背景色などをさまざまな方法で指定できます。たとえば、redやblueのような色名で指定する方法、#FF0000のような16進数カラーコードで指定する方法、rgb()やrgba()を使って赤・緑・青の数値を指定する方法があります。

ここでは、CSSによる色指定を理解するために、まず光の三原色であるRGBの考え方を確認します。そのうえで、16進数の基本、CSSで使う色指定の方法、透明度を含めたrgba()の指定まで、順番にやさしく解説していきます。

CSSで色を指定する場面

CSSで色を指定する場面はたくさんあります。文字色を変えるときはcolor、背景色を変えるときはbackground-colorを使います。ほかにも、線の色や影の色など、CSSではさまざまな場所に色を指定できます。

CSSプロパティ	指定する内容	使用例
color	文字色	見出しや本文の文字色を変える
background-color	背景色	見出しやボックスの背景に色を付ける
border-color	枠線の色	表やボックスの線の色を変える
text-decoration-color	下線などの色	文字装飾の線の色を変える

色を使うときは、単に目立たせるだけでなく、読みやすさも考えることが大切です。たとえば、白い背景に薄い黄色の文字を置くと読みにくくなります。反対に、濃い背景に白い文字を置くと、はっきり見えやすくなります。

CSSの色指定を学ぶと、文字や背景に適切な色を付けられるようになり、ページ全体の印象をコントロールしやすくなります。

図1：CSSで色を指定する場所

この図から分かること

CSSでは、文字色だけでなく、背景色や枠線の色なども指定できます。colorは文字の色、background-colorは背景の色を指定する代表的なプロパティです。

色を適切に使うと、ページの雰囲気を作ったり、重要な情報を目立たせたりできます。ただし、色の組み合わせによっては文字が読みにくくなるため、背景と文字の見え方を確認しながら指定することが大切です。

光の三原色RGBの考え方

コンピューターの画面上で表示される色は、赤、緑、青の光を組み合わせて表現されます。この3つの色を、光の三原色と呼びます。

RGBは、Red、Green、Blueの頭文字です。

表記	色	意味
R	Red	赤
G	Green	緑
B	Blue	青

RGBでは、それぞれの色の強さを0から255までの数値で表します。0はその色の光がない状態、255はその色の光が最も強い状態です。

たとえば、赤だけを最大にして、緑と青を0にすると赤になります。

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	オレンジ

画面上の色は、赤、緑、青の強さを組み合わせることで作られます。赤と緑を強くすると黄色、緑と青を強くすると水色、赤と青を強くすると紫系の色になります。

また、赤、緑、青をすべて最大にすると白になります。すべて0にすると光がないため黒になります。

16進数とは何か

CSSでは、色を#FF0000のような形で指定することがあります。このような表記を理解するために、16進数の考え方を確認しておきましょう。

私たちが普段よく使う数は10進数です。10進数では、0から9までの10種類の数字を使います。

一方、16進数では、0から9に加えて、AからFまでの文字を使います。

10進数	16進数
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	A
11	B
12	C
13	D
14	E
15	F

16進数では、1桁で0から15までを表せます。CSSの色指定では、赤、緑、青のそれぞれを2桁の16進数で表します。

たとえば、10進数の198を16進数にするとC6になります。

198 ÷ 16 = 12 余り 6
12は16進数でC
そのため198はC6

代表的な数値を見てみましょう。

10進数	16進数	考え方
7	07	7は1桁なので07と表す
80	50	80 ÷ 16 = 5 余り 0
115	73	115 ÷ 16 = 7 余り 3
198	C6	198 ÷ 16 = 12 余り 6
255	FF	255 ÷ 16 = 15 余り 15

CSSの色指定では、0から255の値を00からFFまでの2桁で表します。

16進数カラーコードの仕組み

CSSでよく使う16進数カラーコードは、#RRGGBBの形で書きます。

color:#FF0099;

#のあとに、赤、緑、青の値を2桁ずつ並べます。

#RRGGBB

部分	意味
RR	赤の強さ
GG	緑の強さ
BB	青の強さ

たとえば、#FF0000は赤です。

部分	値	意味
RR	FF	赤が最大
GG	00	緑がなし
BB	00	青がなし

つまり、#FF0000はRGBで表すとR=255、G=0、B=0になります。

別の例として、R=255、G=0、B=153の場合を考えます。255は16進数でFF、0は00、153は99です。そのため、16進数カラーコードは#FF0099になります。

R	G	B	16進数カラーコード
255	0	153	#FF0099
0	0	255	#0000FF
255	255	255	#FFFFFF
0	0	0	#000000

16進数カラーコードを使うと、色名だけでは表現しにくい細かな色も指定できます。

図2：RGBと16進数カラーコードの関係

この図から分かること

16進数カラーコードは、赤、緑、青の強さを2桁ずつ並べて表します。#RRGGBBの形で、RRが赤、GGが緑、BBが青を意味します。

たとえば、#FF0099では、赤が最大、緑が0、青が99です。このようにRGBと16進数の関係を理解すると、カラーコードがどのような色を表しているのかイメージしやすくなります。

色名で色を指定する

CSSでは、色名を使って色を指定できます。たとえば、brown、teal、red、blue、greenなどの色名を使うと、分かりやすく色を指定できます。

color:brown;

色名による指定は、見た目から意味を想像しやすいため、CSSを学び始めたばかりの段階でも使いやすい方法です。

色名	色のイメージ
red	赤
blue	青
green	緑
brown	茶色
teal	青緑
orange	オレンジ
gray	灰色
black	黒
white	白

色名指定は手軽ですが、細かな色合いを調整したい場合には向いていません。少しだけ明るい茶色、少しだけ暗い青緑などを指定したい場合は、16進数カラーコードやrgb()を使うと調整しやすくなります。

色名を使ったHTMLファイルの例

ここでは、カフェメニューの見出しと説明文に色名で文字色を指定します。

ファイル名： Lesson12-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カフェメニュー</title>
  <style>
    .menu-title {
      color:brown;
    }

    .season-note {
      color:teal;
    }
  </style>
</head>
<body>
  <h1 class="menu-title">アイスカフェラテ</h1>
  <p class="season-note">夏にぴったりの、すっきりした味わいのドリンクです。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、menu-titleクラスにcolor:brown;を指定し、見出しの文字色を茶色にしています。

season-noteクラスにはcolor:teal;を指定し、説明文の文字色を青緑にしています。

クラス名	CSS	役割
menu-title	color:brown;	見出しの文字色を茶色にする
season-note	color:teal;	説明文の文字色を青緑にする

色名は直感的に分かりやすいので、学習用のサンプルでは扱いやすい指定方法です。

16進数カラーコードで色を指定する

16進数カラーコードは、#から始まる6桁の値で色を指定する方法です。色名よりも細かい色を指定できるため、Web制作ではよく使われます。

color:#8B4513;

この指定では、文字色に茶色系の色を指定しています。

16進数カラーコードは、赤、緑、青の値を2桁ずつ並べて書きます。

#8B4513

部分	値
8B	赤の強さ
45	緑の強さ
13	青の強さ

色名では表しにくい「少し暗い茶色」や「鮮やかなピンク」なども、16進数カラーコードを使えば指定できます。

16進数カラーコードを使ったHTMLファイルの例

ここでは、スイーツ紹介ページを例にして、見出しと本文に16進数カラーコードで文字色を指定します。

ファイル名： Lesson12-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スイーツ紹介</title>
  <style>
    .chocolate {
      color:#8B4513;
    }

    .berry {
      color:#D81B60;
    }
  </style>
</head>
<body>
  <h1 class="chocolate">チョコレートタルト</h1>
  <p class="berry">ベリーソースを添えた、甘酸っぱいムースケーキも人気です。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、chocolateクラスに#8B4513、berryクラスに#D81B60を指定しています。

クラス名	16進数カラーコード	色のイメージ
chocolate	#8B4513	チョコレートのような茶色
berry	#D81B60	ベリー系の濃いピンク

16進数カラーコードを使うと、色の名前に頼らず、より細かな色合いを指定できます。デザインの雰囲気に合わせて色を調整したいときに便利です。

3桁の短縮形式

16進数カラーコードには、#RGBのように3桁で書ける短縮形式もあります。

color:#369;

この指定は、次のように解釈されます。

color:#336699;

3桁の各文字を2回ずつ繰り返して、6桁のカラーコードとして扱います。

短縮形式	6桁にした形
#369	#336699
#F0C	#FF00CC
#000	#000000
#FFF	#FFFFFF
#0F0	#00FF00

短縮形式は、同じ文字が2つずつ並ぶ色で使えます。たとえば、#FF00CCは#F0Cと短く書けます。

ただし、#8B4513のように各成分が同じ文字の繰り返しになっていない色は、3桁に短縮できません。学習段階では、まず6桁の#RRGGBB形式に慣れておくと分かりやすいです。

rgb()で色を指定する

rgb()は、赤、緑、青の値を10進数で指定する方法です。0から255までの数値を使って、RGBの強さを指定します。

color:rgb(255,0,0);

この指定では、赤を255、緑を0、青を0にしているため、赤色になります。

指定	意味
rgb(255,0,0)	赤
rgb(0,255,0)	緑
rgb(0,0,255)	青
rgb(255,255,255)	白
rgb(0,0,0)	黒

rgb()は、赤、緑、青の強さをそのまま数値で書けるため、RGBの考え方を理解しやすい指定方法です。

16進数カラーコードが#FF0000なら、rgb()ではrgb(255,0,0)と書けます。

16進数	rgb()
#FF0000	rgb(255,0,0)
#00FF00	rgb(0,255,0)
#0000FF	rgb(0,0,255)
#FFFFFF	rgb(255,255,255)
#000000	rgb(0,0,0)

rgba()で透明度を指定する

rgba()は、rgb()に透明度を加えた指定方法です。rgba()では、赤、緑、青に加えて、アルファ値を指定します。

color:rgba(0,128,255,0.5);

この指定では、赤が0、緑が128、青が255で、透明度を0.5にしています。

rgba()の4つ目の値は、透明度を表します。

アルファ値	意味
0	完全に透明
0.25	かなり透明
0.5	半透明
0.75	少し透明
1	不透明

rgba()を使うと、文字や背景に半透明の色を指定できます。たとえば、背景の上に薄く色を重ねたい場合や、やわらかい印象の文字色にしたい場合に使えます。

ただし、文字色に透明度を付けると背景によっては読みにくくなることがあります。特に本文では、読みやすさを確認しながら指定しましょう。

図3：色名、16進数、rgb、rgbaの違い

この図から分かること

CSSでは、同じ色でも複数の方法で指定できます。色名は分かりやすく、16進数カラーコードは細かな色指定に向いています。

rgb()は赤、緑、青の値を10進数で指定する方法です。rgba()では、さらに透明度を指定できます。目的に合わせて色指定の方法を選ぶことで、ページの印象を細かく調整できます。

rgb()とrgba()を使ったHTMLファイルの例

ここでは、rgb()とrgba()を使って文字色を指定します。

ファイル名： Lesson12-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>色指定の練習</title>
  <style>
    .clear-red {
      color:rgb(255,0,0);
    }

    .soft-blue {
      color:rgba(0,128,255,0.5);
    }
  </style>
</head>
<body>
  <p class="clear-red">赤をrgb()で指定した文字です。</p>
  <p class="soft-blue">透明度を加えた青系の文字です。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、clear-redクラスにrgb(255,0,0)を指定しています。赤、緑、青のうち赤だけを最大にしているため、赤色になります。

soft-blueクラスにはrgba(0,128,255,0.5)を指定しています。青系の色に、0.5の透明度を加えた指定です。

クラス名	CSS	内容
clear-red	color:rgb(255,0,0);	赤色の文字
soft-blue	color:rgba(0,128,255,0.5);	半透明の青系の文字

rgb()やrgba()は、数値で色を指定したいときに便利です。特にrgba()は透明度を指定できるため、背景色や重ね合わせのデザインでもよく使われます。

代表的な色指定の対応表

代表的な色を、16進数カラーコードとrgb()で整理しておきましょう。

色名	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)
黒	#000000	rgb(0,0,0)
白	#FFFFFF	rgb(255,255,255)

同じ色でも、16進数とrgb()では書き方が違います。#FF0000とrgb(255,0,0)は、どちらも赤を表します。

Web制作では、デザインツールやカラーピッカーで16進数カラーコードが表示されることがよくあります。一方、RGBの数値を直接調整したいときはrgb()が分かりやすい場合があります。

色指定方法の使い分け

CSSには複数の色指定方法があります。それぞれ特徴があるため、場面に応じて使い分けるとよいです。

方法	記述例	向いている場面
色名	color:red;	学習用、簡単な確認、基本色の指定
16進数カラーコード	color:#FF00CC;	細かな色指定、デザインに合わせた色指定
短縮形式	color:#F0C;	短く書ける色を簡潔に指定したい場合
rgb()	color:rgb(255,0,204);	RGBの数値で色を指定したい場合
rgba()	color:rgba(255,0,204,0.5);	透明度を含めて色を指定したい場合

最初は色名で試すと分かりやすいです。慣れてきたら、16進数カラーコードを使うと、より自由に色を指定できます。透明感を出したい場合はrgba()を使います。

色を使うときの注意点

色はページの印象を作る大切な要素ですが、使い方によっては読みにくくなることがあります。特に、文字色と背景色の組み合わせには注意しましょう。

注意点	内容
文字色と背景色の差を確保する	似た明るさの色同士だと文字が読みにくくなる
色だけで情報を伝えない	色が見分けにくい人にも伝わるように文字でも補足する
強い色を使いすぎない	ページ全体が落ち着かず、重要部分が分かりにくくなる
透明度を下げすぎない	文字が背景に溶け込み、読みにくくなる
統一感を意識する	ページ内で使う色が多すぎるとまとまりにくい

たとえば、注意文を赤色にする場合でも、赤だけで意味を伝えるのではなく、「注意」「重要」などの文字も添えると分かりやすくなります。

また、背景色に濃い色を使う場合は、文字色を白や明るい色にするなど、コントラストを意識しましょう。

CSSで色が反映されないときの確認ポイント

CSSで色を指定しても思った通りに反映されない場合は、次の点を確認しましょう。

確認項目	内容
プロパティ名	colorやbackground-colorを正しく書いているか
コロンとセミコロン	color:red; の形になっているか
色名のスペル	brownやtealなどを正しく書いているか
#の書き忘れ	16進数カラーコードの先頭に#があるか
桁数	#RRGGBBは6桁、短縮形式は3桁になっているか
rgb()の数値	0から255の範囲で指定しているか
rgba()の透明度	4つ目の値が0から1の範囲になっているか
class名	HTML側のclass属性とCSS側のセレクタが一致しているか
全角記号	：；＃などの全角記号が混ざっていないか

特に、16進数カラーコードでは#の書き忘れが起こりやすいです。また、rgb()ではカンマや数値の範囲にも注意しましょう。

使用したCSSプロパティと色指定方法一覧

種類	記述例	説明
color	color:red;	文字色を指定する
color	color:#FF00CC;	16進数カラーコードで文字色を指定する
color	color:#F0C;	3桁の短縮形式で文字色を指定する
color	color:rgb(255,0,204);	rgb()で赤、緑、青の値を指定する
color	color:rgba(255,0,204,0.5);	rgba()で透明度を含めて色を指定する
background-color	background-color:#FFFFCC;	背景色を指定する
#RRGGBB	#FF0099	赤、緑、青を2桁ずつ16進数で表す
rgb()	rgb(255,0,153)	赤、緑、青を0から255の10進数で表す
rgba()	rgba(255,0,153,0.5)	RGBに透明度を加えて表す

6日でできる 新HTML入門｜CSSによる色指定