CSS3スタイル虎の巻

色の指定方法

CSSで色を指定する方法は、以下4種類があります。

カラーネームで指定

主要な色には名称が付けられていますので、この名称(カラーネーム)で色を指定できます。

(例)青色を指定する
 ⇒ background-color:blue;

※カラーネームは、カラーネーム一覧をご覧ください。

カラーコードで指定

16進数のカラーコードで指定する方法です。
すべての色は、赤色、緑色、青色の3色の組み合わせで表現されますので、
これら3色それぞれ00~ffまでの16進数(256諧調)で指定します。

(例)赤ff、緑80、青00を指定する
 ⇒ background-color:#ff8000;

赤色、緑色、青色それぞれの1桁目と2桁目の値が同じ場合は、以下のように省略できます。

(例)#99ffaa ⇒ #9fa

RGB値で指定

赤色、緑色、青色の3色を10進数で指定します。
値はそれぞれ0~255の範囲で指定します。

(例)赤255、緑80、青127を指定する
 ⇒ background-color:rgb(255, 80, 127);

RGBA値で指定

RGB値に透明度も指定する場合はRGBAを指定します。
4番目の値に透明度(0.0~1.0)を指定します。0.0が完全に透明、1.0が不透明です。

(例)赤255、緑165、青0、透明度0.5を指定する
 ⇒ background-color:rgba(255, 165, 0, 0.5)