トップページの中の CSSの基本の中の 色の指定に関して

色の指定に関して

  • 最終更新:2010年5月 5日 13:42

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 ■色■

他に、システムカラーなども指定できます。

このページの上部へ