トップページの中の 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 ■色■

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

Comment [2]

> p {
> color: rgb(100%,20%,0);
> }

CSS2.1では「rgb(100%,20%,0)」という値は不正です。「rgb(100%,20%,0%)」でなければなりません。
http://www.w3.org/TR/CSS2/syndata.html#color-units
に「The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'.」と書いてある通り、「rgb(」と「)」の間は、カンマで区切られた3つの整数値か3つの百分率値でなければなりません。
(なお、その後に「White space characters are allowed around the numerical values.」と書かれているので、カンマで区切られた値の前後に空白文字を入れてもOKです。)

No.1|by シマダさん|2010年5月 5日 07:08

> シマダさん
ホントだ、すみません。
わざわざご指摘頂きありがとうございます。
修正しておきました。

No.2|by hirasawaさん|2010年5月 5日 13:47

Post Your Comment

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。

公開されません

このページの上部へ