【CSS】色を指定する方法について

目次

1. 1. CSSで色を指定する方法
2. 2. カラーコード
3. 3. カラーネーム
4. 4. rgb
5. 5. まとめ

1. CSSで色を指定する方法

CSSで色を指定する方法は、大きく分けて以下の3種類があります。

• カラーコード
• カラーネーム
• rgb

2. カラーコード

シャープ（#）+6ケタの16進数（0～F）で指定する方法で、最もよく使用される方法です。

■記述例（黒を指定する場合）

color: #000;

■値の参考例

黒：#000000（※#000と省略して記述されることもあります。）
赤：#ff0000
青：#0000ff

3. カラーネーム

あらかじめ定義されているカラーのキーワードで指定する方法です。使い方は簡単ですが、定義されているカラーの数が限られていて細かい色の指定ができないため、実務で使用することはあまりありません。

■記述例（黒を指定する場合）

color: black;

■値の参考例

黒：black
赤：red
青：blue

4. rgb

光の3原色である赤、緑、青のカラーコードで指定する方法です。それぞれの値は0〜255の数字で表します。rgbに透明度を追加したrgbaでは、カラーコードの後に透明度を設定して指定したカラーを透過させることができます。背景のカラーを透過させる場合などはこの方法を使用します。

■記述例（黒を指定する場合）

color: rgb(0, 0, 0);

■値の参考例

黒：rgb(0, 0, 0);
赤：rgb(255, 0, 0);
青（透明度60%）： rgba(0, 0, 255, 0.6);

5. まとめ

CSSで色を指定する方法について解説してきました。

CSSで色を指定する方法は、大きく分けて「カラーコード」「カラーネーム」「rgb（rgba）」の3種類の方法があります。

実務で使用する際は、一般的には「カラーコード」を使用し、背景を透過させる場合などは「rgba」を使用します。