色の指定に関して
colorプロパティやbackground-colorプロパティ等で指定する色の値は、「キーワード」もしくは「RGB値」で指定する必要が有ります。
まずは簡単なサンプルを見てください。
p {
color: #2a2a2a; /* RGB値(16進数、6桁) */
}
p.att {
color: red; /* キーワード */
}
こんな感じで、RGB値で指定する場合は、16進法の数値の前にシャープ(#
)を必ず付けます。
キーワード指定の場合、シャープを付けてはいけません。
また、大文字、小文字の区別が行われないので、#F00と書いても、#f00と書いても問題ありません。
指定方法
RGB値(16進数、6桁)
p {
color: #333333;
}
RGB値の各値を6桁の16進数(0~f)で指定します。
RGB値(16進数、3桁)
p {
color: #f30;
}
RGB値の各値を3桁の16進数(0~f)で指定します。
3桁の場合は、二度繰り返した6桁の16進数と同じです。
上記の場合だと、「#ff3300」と同じになります。
RGB値(10進数)
p {
color: rgb(255,0,0);
}
「rgb()」関数を利用して、RGB値の各値の10進数(0~255)を半角カンマ(,
)で区切って指定します。
尚、255以上の値を指定した場合は、255として解釈されます。
RGB値(パーセンテージ値)
p {
color: rgb(100%,20%,0%);
}
10進数と同様ですが、こちらは%
で指定します。
尚、100以上の値を指定した場合は、100として解釈されます。
キーワード指定
p {
color: green;
}
あらかじめ決められたキーワードを指定する事で該当の色が反映されます。
色のキーワード
キーワードでは、HTML 4で定義済みの16色+CSS2.1で新たに追加されたorange
が指定できます。
- black ■色■
- silver ■色■
- gray ■色■
- white ■色■
- maroon ■色■
- red ■色■
- purple ■色■
- fuchsia ■色■
- green ■色■
- lime ■色■
- olivie ■色■
- yellow ■色■
- navy ■色■
- blue ■色■
- teal ■色■
- aqua ■色■
- orange ■色■
他に、システムカラーなども指定できます。