【6日でできるHTML＆CSS入門】16進数の表現

―なぜ「#FF5733」がオレンジに見えるのか？―
　10 進数は私たちが日常で使う表記ですが、コンピュータ内部では 2 進数（0 と 1）で値を管理します。ところが 2 進数は桁が長く、人には読みにくい―そこで登場するのが 16 進数 (hexadecimal) です。16 進数は 4 bit（2 進数4桁）を 1 桁で表せるため、メモリダンプや CSS カラーコードなど “数字が長くなりがち” な場面で重宝します。ここでは 10↔16 変換のコツから Web 表示の実例まで段階的に解説します。

１．16 進数とは

1.1. 基数 16 の桁上がり

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

16 個の「数字」を使うため、10 を A、11 を B、15 を F で表します。

1.2. 16 進数 → 10 進数

例：(1FA)₁₆
1×16² + F(15)×16¹ + A(10)×16⁰ = 256 + 240 + 10 = (506)₁₀

1.3. 10 進数 → 16 進数

例：(506)₁₀

506 ÷ 16 = 31  余 10 → A ↑
31  ÷ 16 = 1   余 15 → F ↑
1   ÷ 16 = 0   余 1  → 1 ↑

逆順に並べる → 1FA₁₆

２．16 進数と 2 進数の親密な関係

2.1. 4 bit = 1 hex

16 進	0	1	2	3	4	5	6	7
2 進	0000	0001	0010	0011	0100	0101	0110	0111

16 進	8	9	A	B	C	D	E	F
2 進	1000	1001	1010	1011	1100	1101	1110	1111

8 bit (1 byte) なら 2 桁の 16 進数（00〜FF）、16 bit なら 4 桁（0000〜FFFF）で表現できます。

2.2. 実務での利点

CSS 色指定：#FF5733（R=FF, G=57, B=33）
メモリアドレス・エラーコード：0x7FFF_EE00 など桁がそろい読みやすい
バイナリ解析：4 bit 境界で区切れるためビットフラグ確認が容易

３．Web で使う 16 進色コード

3.1. サンプル HTML（背景に 16 進色）

ファイル名： lesson19_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>16進カラー例</title>
  <style>
    body { background:#1FA; color:#ffffff; }
  </style>
</head>
<body>
  <h1>#1FA は黄緑っぽい色</h1>
  <p>3 桁表記 #RGB は #RRGGBB の略記 (4bit×3)。</p>
</body>
</html>

出力：ページ背景が黄緑 (#11FFAA) になり、文字は白。

表示結果

3.2. サンプル HTML（フル 6 桁）

<p style="color:#FF5733;">#FF5733 は温かみのあるオレンジ</p>

４．タグと属性まとめ（今回の例で使用）

タグ / 属性	目的	備考
`<html>`	HTML 文書ルート	`lang="ja"` で言語指定
`<head>`	メタ情報	`<meta charset>` で文字コード
`<style>`	内部 CSS	16 進色を指定
`<body>`	表示内容	`background` に 16 進使用
`<h1> <p>`	見出し・段落	`color` に 16 進使用

まとめ

16 進数は 0–9 + A–F で 0–15 を表し、4 bit＝1 桁 に対応するため 2 進数をコンパクトに表示できる。
10↔16 変換は「桁の重み付け」と「割って余りを逆順」の 2 手順を覚えれば簡単。
Web では RGB 各 1 byte を連結した #RRGGBB 形式が主流で、3 桁略記や α 値付き 8 桁表記も存在する。

　16 進数をマスターすれば、色指定・メモリアドレス・エンコードバイト列など “数字だらけ” の世界が一気に読みやすくなります。