【CSS】文字に色をつける

基本

セレクタ{
	color: 色の指定;
}

色の指定方法

• RGB値
• 16進数
• 英語名
• HSL色空間

RGB値

赤(Red)、緑(Green)、青(Blue)の3つの色をそれぞれ0～255の値で指定する方法です。

赤色を表示したいときは、「R=255, G=0, B=0」なので「rgb(255,0,0)」と表記します。

また、透明度(Alpha)を指定することもできます。0が透明、0.5が半透明、1が不透明のように0～1の値で記述します。

半透明の赤色を表示したいときは「rgba(255,0,0,0.5)」と表記します。

16進数

RGB値を6桁の16進数で指定する方法です。

先頭に「#」をおき、それに続いてRGB値の値をそれぞれ2桁ずつの16進数で書きます。

赤色を表示したいときは、赤のRGB値が「R:255, G:0, B:0」なので「#ff0000」と表記します。

また、3桁で「#f00」と表記する方法もあります。これはRGB値のそれぞれの数値が2個ずつ繰り返された形になります。

「#0a5」は「#00aa55」と同じです。

英語名

色の英語名で指定する方法です。

赤色を表示したいときは「red」と表記します。

HSL色空間

色相(Hue)、彩度(Saturation)、明度(Lightness)の3つの値をそれぞれ指定する方法です。

色相は色相環における角度で指定します。（単位は不要）

彩度と明度は0～100％で指定します。

赤色を表示したいときは「hsl(0,100%,50%)」と表記します。

また、RGB値同様に透明度を指定できます。

半透明の赤色の場合は「hsla(0,100%,50%,0.5)」と表記します。

例

<div class="test1">
	全体を赤にする
</div>

<div>
	一部を<span class="test2">青</span>にする
</div>

<div>
	<span class="test3">半透明</span>にもできる
</div>

.test1{
	color: #f00; /* 赤 */
}

.test2{
	color: blue; /* 青 */
}

.test3{
	color: rgba(0, 0, 0, 0.5); /* 黒の半透明 */
}