CSSで色を扱う為のカラーコードについて

投稿日時 : 2024/10/06 更新日時 : 2024/11/09

色について解説するよ！

カラーコードの基本

カラーコードを使う場合は主に3つの方法がある。

HTMLやCSSで色を使う場合に一番分かりやすく簡単な方法がカラーネームを使う方法だ。

赤ならred、緑ならgreen、青ならblueとHTMLやCSSに標準で使えるカラーの名前を指定する事で、色が適用できる。これらのカラーネームは100種類以上あるようだ。


.color_red {
  color: red;
}

16進数とは
0→1→2→3→4→5→6→7→8→9→a→b→c→d→e→f
上記の16段階で値の大きさを表す。通常は2文字で1つの色の要素の度合いを表す。

例えば ff なら16 × 16なので256だ。しかし0からカウントは始まるのでffは255を表す。

0から255で1つの色の要素の度合いを表す

一度は聞いたことがあるであろう、色はRGBで1色を表す。例えば下記だ。

赤緑青
#ff00ff
赤と青がMAXの255で緑の情報が0なので、紫色となる。そして重要なのが16進数のカラーコードは先頭に「#」を付ける事だ。カラーコードは6文字で1つの色を表すが、例外として同じ数値を使う場合は省略して3文字でもOK。例えば

#f0f
上記は先ほどのコードと全く同じで紫色となる。

数値が高くなるほど明るい色に、逆に数値が低いと暗い色になるようですよ！例えば
#000000は黒で
#ffffffは白になります

16進数のfとか分かりづらいいんじゃ！と思った方、朗報だ。数字でも指定できるのがこの表記方法だ。

rgba( 赤, 緑, 青, 透明度 );
上記で表すことができる。値は0から255を指定できる。透明度は0が完全な見えない状態で0.5が半透明、1が透明効果なしの0.00から1.00で指定できる。あまり使わないが0.001を指定すると0.1%の効果となる。


.color_red {
  color: rgba(255, 0 , 0, 1);
}

上記のコードは完全な赤色だ。16進数を使ったコードよりも透明度の設定ができるので、上位互換の指定方法だな。ちなみにこれを使えば背景を半透明にしたりできるのでデザイン要素にはかかせない。絶対に覚えておこう！