- 表紙
- 単元
- イメージ
- 理解
- コード
今日の授業
色々なWebカラーをデザイン！
RGBで次の色は16進数カラー表記ではなに？
$$(202, 239, 254)$$
単元のまとめ
16進数カラー表記
目標
6桁の数の前に「#（ハッシュ）」を付けて色を指定する。
記法
RGBを2桁ずつ計6桁で表す方法をHex（16進数カラー表記）という.
RGBの256段階
256段階は，$0$, $1$, $2$, $\cdots$, $9$, $a$, $b$, $c$, $d$, $e$, $f$ の16個の数字を使って16進数で２桁で表記することができる。
RGBのそれぞれの色は
0〜255までの256段階で表記される。
計算
●#0000fa：(R, G, B) = (0, 0, 250)
●#ffff00：(R, G, B) = (255, 255, 0)
●#00ffff：(R, G, B) = (0, 255, 255)
豆知識
Web上の色はRGBカラーで指定される。RGBは光の３原色の赤緑青色のことで, コーディングでよく使われます。
Webカラーのイメージ
RGBとHexのイメージ
赤色の種類
#010000から#ff0000までの変遷を見てみましょう。
#010000
#0f0000
#100000
#200000
#300000
#400000
#500000
#600000
#700000
#800000
#900000
#a00000
#b00000
#c00000
#d00000
#e00000
#f00000
#ff0000
Hexの理解
Hexについて
主張
0〜255の256個の数は，16進数では2桁で表すことができる。
数えましょう．
15まで数える（記号の用意）
0から9までは普通に数えて，10から15までは次の記号と対応させる。
| Hex | $a$ | $b$ | $c$ | $d$ | $e$ | $f$ |
| 通常 | 10 | 11 | 12 | 13 | 14 | 15 |
32まで数える（繰り上がり）
普通の数字で16以上は，Hexでは２桁で表示できる。
| Hex | $10$ | $11$ | $12$ | $13$ | $14$ | $15$ | $16$ | $17$ | $18$ |
| 通常 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| Hex | $19$ | $1a$ | $1b$ | $1c$ | $1d$ | $1e$ | $1f$ | $20$ |
| 通常 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
上の位（16ずつ増える）
Hex表記では２桁の上の位が１大きくなると，普通の数値では16だけ大きくなることを表す。
| Hex | $20$ | $30$ | $40$ | $\cdots$ | $90$ | $a0$ |
| 通常 | 32 | 48 | 64 | - | 144 | 160 |
| Hex | $b0$ | $c0$ | $d0$ | $e0$ | $f0$ |
| 通常 | 176 | 192 | 208 | 224 | 240 |
255まで数える
$f$ から始まる数字の対応を見る。通常の数では240から255までに対応する。
| Hex | $f0$ | $f1$ | $f2$ | $f3$ | $f4$ | $f5$ | $f6$ | $f7$ | $f8$ |
| 通常 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 |
| Hex | $f9$ | $fa$ | $fb$ | $fc$ | $fd$ | $fe$ | $ff$ |
| 通常 | 249 | 250 | 251 | 252 | 253 | 254 | 255 |
WebカラーのCSSコード
虹色のCSSコード
HTMLのタグはCSSで着色することができる。
p {
background: linear-gradient(45deg, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FFA500, #FF0000);
height: 25vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
