Table of Contents
さて、今まで背景色や文字色を変更する際に以下の方法を使っていました。
- 「red」「blue」など具体的な色の英語名（カラーネーム）を使った指定
- 各色の成分（RGB）を整数（0〜255）で指定
色を指定する方法はこれ以外にもあります。今回は色の指定に関して詳しく解説します。
カラーネームによる指定方法
最近のブラウザで使えるカラーネームは140種類以上と言われています。しかし、細かい色を指定したい場合、後述するRGB指定を使うことが多いため、ここでは代表的な色のみを紹介します。
詳しくは「css color name」などで検索してください。
| 色 | カラーネーム | 実際の色 |
|---|---|---|
| 白 | white | |
| 黒 | black | |
| 灰 | gray | |
| やや薄い灰 | darkgray | |
| 銀 | silver | |
| 薄い灰 | lightgray | |
| 赤 | red | |
| 赤橙 | orangered | |
| 橙 | orange | |
| 金 | gold | |
| 黄 | yellow | |
| 黄緑 | greenyellow | |
| 薄緑 | lightgreen | |
| ライム | lime | |
| ライムグリーン | limegreen | |
| 緑 | green | |
| ターコイズ | turquoise | |
| アクア（シアン） | aqua（cyan） | |
| 深い空色 | deepskyblue | |
| 青 | blue | |
| プラム | plum | |
| すみれ色 | violet | |
| マゼンタ | magenta | |
| 紫 | purple | |
| ピンク | pink | |
| 象牙色 | ivory |
RGB値を整数で指定
赤(Red)、緑(Green)、青(Blue)それぞれの色の成分を 0〜255 で表す指定方法です。
例えば青なら、赤と緑の成分はないので 0 として、青の成分を最大の 255 にします。
rgb(0, 0, 255);
代表的な三色を使ったページの例を以下に示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>色のRGB指定の例</title>
</head>
<style>
.red-text {
color: rgb(255, 0, 0);
}
.green-text {
color: rgb(0, 255, 0);
}
.blue-text {
color: rgb(0, 0, 255);
}
</style>
<body>
<p class="red-text">ここは赤文字</p>
<p class="green-text">ここは緑文字</p>
<p class="blue-text">ここは青文字</p>
</body>
</html>
このHTMLソースをブラウザで表示すると、それぞれの色の段落ができていることが確認できます。
このように、各色の成分を数値で指定できるので、細かい色も表現することができます。
最大で 256 × 256 × 256 = 16,777,216 … 約1600万色を表現することができます。
RGBを16進数で指定
もう一つ色を指定する方法があります。色の成分を16進数で指定する方法です。
16進数とは
普段私たちが使っている数は、10になるとケタが増える数値です。これを10進数と言います。
16進数は16になるとケタが増える数値です。
ちょっとわかりにくいと思いますので、10進数と16進数のケタの上がり方を比較した表を見てみましょう。
| 10進数での数値 | 16進数での数値 |
|---|---|
| 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 | 10 |
| 17 | 11 |
| … | … |
| 100 | 64 |
| … | … |
| 255 | ff |
つまり、16になって初めて2ケタになる数値が16進数です。
ひとつだけで10を表すことのできる数字がアラビア数字（0~9）には存在しないため、代わりにアルファベットを使って10以上の数値を表しています。
16進数で255を表すにはffとします。
なぜなら、「16進数の2けた目の数×16 + 16進数の1けた目の数 = 10進数 」となるからです。
例えば、16進数の64は 6×16 + 4 = 100 です。
16進数のffは、fが15なので 15×16 + 15 = 255 です。
この16進数を使って色を表すには、#（ハッシュ）を書いた後に、すべての色の成分の値をつなげて書きます。
このような色の表記をカラーコードと呼びます。実際に16進数カラーコードで色を指定したCSSを以下に示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>色のRGB指定の例</title>
</head>
<style>
.red-text {
color: #ff0000;
}
.green-text {
color: #00ff00;
}
.blue-text {
color: #0000ff;
}
</style>
<body>
<p class="red-text">ここは赤文字</p>
<p class="green-text">ここは緑文字</p>
<p class="blue-text">ここは青文字</p>
</body>
</html>
このHTMLソースをブラウザで表示すると、先ほどのRGB指定と全く同じ結果になるます
透明度を含めて色を指定する
透けた色を表現するには r, g, b に加え、a（アルファ値: alpha）を設定します。
アルファ値とは、どれだけ不透明かを表す値で、これは 0〜1 の小数を含む値で表します。例えば半透明の青を表現する場合は次のように書きます。
rgba(0, 0, 255, 0.5);
値が小さいほど透明になり、0だと完全な透明になります。値が大きいほど不透明になり、1で不透明になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>色のRGB指定の例</title>
</head>
<style>
.red-text {
color: rgba(255, 0, 0, 0.7);
}
.green-text {
color: rgba(0, 255, 0, 0.5);
}
.blue-text {
color: rgba(0, 0, 255, 0.2);
}
</style>
<body>
<p class="red-text">ここは赤文字</p>
<p class="green-text">ここは緑文字</p>
<p class="blue-text">ここは青文字</p>
</body>
</html>
表示してみると、アルファの値が小さくなるほど透明度が増しているのがわかります。
おさらい
今回紹介した様々な色の指定方法をおさらいしましょう。
- 色の英語名（カラーネーム）を指定して色を設定できます。
- RGBの各成分を指定して色を表現することができます。
- 16進数によるRGB値の指定（カラーコード）で色を設定できます。
- 透明な色を表現するにはアルファ値を設定します。