HTMLやブログで色を指定する時に「#FFFFFF」とかたまに見ますよね。
でもこの意味分かりますか？
この「#FFFFFF」について説明します。
#FFFFFFは色情報を表すカラーコード
背景や文字を白くするときに"#FFFFFF"を書いています。
でも、なぜ"#FFFFFF"で白くなるの？そもそもFってどういう意味？
今回はこのような疑問について説明していきます。
"#FFFFFFF"は色情報を表すカラーコードです。
例えば、文字色を白にしたい場合、１つの例として「span」タグで囲い、下記のように記載します。（※背景は黒）
【HTMLでの記述】
<span id="white_color">背景が黒、文字が白</span>
【CSSまたはstyleタグでの記述】
span#white_color {
color:#FFFFFF;
background-color:black;
}もし、CSSやstyleタグが分からないという方は、下記をメモ帳などで記入し、「sample.html」等と名前を付けて保存してください。
そのファイルをGoogle Chromeなどお使いのWebブラウザへドラッグ＆ドロップしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
span#white_color {
color:#FFFFFF;
background-color: black;
}
</style>
</head>
<body>
<span id="white_color">背景が黒、文字が白</span>
</body>
</html>【表示結果】
背景が黒、文字が白
このようにCSS、もしくは「style」タグに「color:#FFFFFF;」と書くと文字が白色になります。
「color」は文字の色を指定し、「#FFFFFFF」は白色であることを表します。
ココがポイント
「#FFFFFF」は色情報を表すカラーコード
ではなぜ、「#FFFFFF」では白色になるのでしょうか？
#FFFFFFは、FF(赤色) | FF(緑色) | FF(青色)で分かれる
#FFFFFFは2桁ごとに区切り、順に赤色、緑色、青色の数値を表しています。
#FFFFFF ⇒
#FF(赤色の数値) | FF(緑色の数値) | FF(青色の数値)
このように最初の2桁が赤色の数値、次の2桁が緑色の数値、最後の2桁が青色の数値になります。
例として、紫色の文字にしてみたいと思います。
紫は赤と青を混ぜると紫になります。
他にも、「黄色＝赤＋緑」、「水色＝緑＋青」といった組み合わせが可能です。
最初の２桁が赤、最後の２桁が青なので両端が「FF」、緑は不要なので、真ん中２桁を「00」にします。
数字で表すと「#FF00FF」となります。
【HTMLでの記述】
<span id="purple_color">文字が紫色</span>
【CSSまたはstyleタグでの記述】
span#purple_color {
color:#FF00FF;
}先ほど同様、CSSやstyleタグが分からないという方は、こちらをお試しください。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
span#purple_color {
color:#FF00FF;
}
</style>
</head>
<body>
<span id="purple_color">文字が紫色</span>
</body>
</html>【表示結果】
文字が紫色
このように文字が紫色になりました。
「#FFFFFF」が白になる理由は、赤、緑、青を混ぜると白になるためです。
白 ＝ 赤 ＋ 緑 ＋ 青
ココがポイント
- 「#FFFFFF」はFF(赤) | FF(緑) | FF(青)で分かれる
- 「#FFFFFF」は赤＋緑＋青＝白
色の組み合わせは分かったのですが、「FF」って何ですか？
それでは次は「FF」とは何か説明します。
Fは16進数表記
「F」は16進数表記です。
16進数とは、１から数えていって、16になったら桁上がりする数え方です。
私達、人間は10進数を使用していますね。
10進数の場合、下記のように「９」から「１０」になったら桁上がりしますね。
1，2，3，4，5，6，7，8，9，10
これが16進数の場合、下記のようになります。
1，2，3，4，5，6，7，8，9，A，B，C，D，E，F，10，11，…，1E、1F，20，21…，FE，FF
| 10進数 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | … | 255 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 16進数 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | b | C | D | E | F | 10 | … | FF |
このようになります。
最後の16進数「FF」は、なぜ１０進数で「255」になるのですか？
それは、１０進数における「２５５」の数え方をイメージすると分かります。
２５５ ＝ ２×１００ ＋ ５×１０ ＋ ５
です。
このように桁上がりするたび、
「１の位の数」×１＋「１０の位の数」×１０＋「１００の位の数」×１００…と計算していけば良いことが分かります。
では１６進数ではどうでしょうか。
同じように桁上がりするたび、
FF ＝ F × 16 ＋ F
と計算できます。
ここで、「F」を10進数に変換します。
16進数の「F」は、10進数では「15」でした。
FF ＝ F × 16 ＋ F ※16進数「F」に10進数の「15」を代入します。
＝ 15×16 ＋ 15
＝ 240 ＋ 15
＝ 255
このように16進数の「FF」は、10進数で「255」となります。
ココがポイント
- 「F」は16進数表記
- 「FF」は10進数では「255」に相当する
「255」の方が分かりやすいのですが…
このように思われるかもしれません。私もそう思いました。
16進数を利用するのはコンピュータにとって都合が良いからです。
次にコンピュータにとって、16進数が良い理由を説明します。
コンピュータの世界は2進数
コンピュータの世界は「０」か「１」の２進数です。
つまり「はい」か「いいえ」でのみ構成されていて、例えばキーボードなら「押した」か「押していない」の２通りだけしか判断していないからです。
キーボードが押されたかどうか判断する場合、ICと呼ばれる回路にキーボードのスイッチが接続されています。
「ICの足」に対して、スイッチ１個が接続されていて、「押したか」、「押していないか」を判断しています。
通常、何も押されていない場合は図のようにプラスの電圧（例では５V）になっています。
イメージとしては旗上げゲームで、常に旗を上げている状態です。
スイッチが押されていない（旗が上がっている）ときはコンピュータは何もしていないと判断します。
スイッチが押された場合、スイッチが押される事によってICの足が「0V」と接続されます。
旗上げゲームでは旗を下ろした状態になります。
スイッチが押されて「0V」になった（旗が下ろされた）場合、コンピュータはスイッチが押されたと判断します。
- スイッチが押されていない状態＝１(5V）
- スイッチが押された状態＝0（0V）
このように２進数で表現されるため、2の倍数の方がコンピュータにとって処理がしやすくなります。
下の表を見てください。
| 2進数 | 10進数 | 16進数 |
|---|---|---|
| 1 | 1 | 1 |
| 10 | 2 | 2 |
| 11 | 3 | 3 |
| 100 | 4 | 4 |
| 101 | 5 | 5 |
| 110 | 6 | 6 |
| 111 | 7 | 7 |
| 1000 | 8 | 8 |
| 1001 | 9 | 9 |
| 1010 | 10 | A |
| 1011 | 11 | B |
| 1100 | 12 | C |
| 1101 | 13 | D |
| 1110 | 14 | E |
| 1111 | 15 | F |
| 1 0000 | 16 | 1 0 |
| 1 0001 | 17 | 1 1 |
| ： | ： | ： |
| 1111 1111 | 255 | F F |
| 1 0000 0000 | 256 | 1 0 0 |
このように2の倍数であれば、2進数における桁上がりとタイミングが揃います。
また16進数の場合、2進数における数字４個のブロックと、16進数における数字１個のブロックが揃います。
どういう事かというと、
16進数で「F F」の場合、２進数では「1111 1111」となります。
同様に16進数で「F 0」の場合、2進数では「1111 0000」となるので、管理がしやすくなります。
まとめ
Webページ制作におけるHTMLやCSS、ブログで見かける「#FFFFFF」はまとめると下記のようになります。
ココがポイント
- 「#FFFFFF」は16進数表記
- 「#FFFFFF」は2桁ごとに FF(赤色) | FF(緑色) | FF(青色)で分かれる
- 「#FFFFFF」が白色になるのは、赤＋緑＋青を混ぜると白色になるため
- 「#FF」を10進数に直すと「255」、2進数では「1111 1111」と表せる
この原理を理解すれば、下記のように好きな色へ変更が出来るので、色々と数値を変えて試してみてください。
| 数値 | 説明 ○○hは16進数 [△△△]は10進数 | 見た目 |
|---|---|---|
| #FF0000 | 赤FFh[255]＋緑00h[000]＋青00h[000] | |
| #EE7800 | 赤EEh[238]＋緑78h[120]＋青00h[000] | |
| #FFFF00 | 赤FFh[255]＋緑FFh[255]＋青00h[000] | |
| #00FF00 | 赤00h[000]＋緑FFh[255]＋青00h[000] | |
| #0000FF | 赤00h[000]＋緑00h[000]＋青FFh[255] | |
| #165E8A | 赤16h[022]＋緑5Eh[094]＋青8Ah[138] | |
| #FF00FF | 赤FFh[255]＋緑00h[000]＋青FFh[255] |
