CSS文法[色・カラー]
CSSスタイルシート文法[色・カラー]
<< CSSのカウンター
CSSの色・カラーは
CSSの色・カラーは以下の通りです。
※このページは、W3Cの4 CSS2 syntax and basic data types[英文]を当サイト管理人が2008年08月25日、意訳したものですが、構文解釈の違いや翻訳の違いが含まれるかもしれません。正式文書はW3C 各種仕様書(英語版)である事を予めご了承ください。
色・カラー
色・カラーは、[bule]などの16色(HTML4.01/CSS2.1でorangeが追加され17色)の直接色指定かまたは、RGBを表す数値で指定します。
HTML4.0で定義された16色は、aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellowです。
ユーザー環境によってこれら16色以外の特殊なキーワードがある場合もあります。
| orange | |||
色名指定の場合は、下記のように設定します。
|
◆色名指定の例 p { color: aqua; background-color:blue } |
RGB指定は、カラー仕様を16進数表現で[#]に続けて[0-9a-fA-F]の値を３つまたは６つ並べた値か、[ rgb( ) ]を利用して[ 0～255 ]の範囲の数値を入れるか、[ 0.0%～100.0％ ]の比率で指定します。
16進数表現[0-9a-fA-F]の値を３つ並べた場合または、[ rgb( ) ]を利用して[ 0～255 ]の範囲の数値を入れるか、[ 0.0%～100.0％ ]の比率で指定した場合には、最初の１つがR[red/赤]、２つめがG[green/緑]、３つめがB[blue/青]の指定で、16進数表現[0-9a-fA-F]の値を６つ並べた値の場合には、最初の2文字が[R]、3文字めと4文字めが[G]、5文字めと6文字めが[B]に一致します。
色名指定の場合は、下記のように設定します。
|
◆各種RGB指定の例(red/赤の設定例) p { color: #f00 } p { color: #ff0000 } p { color: rgb(255,0,0) } p { color: rgb(100%,0,0) } ※16進表現の黒は[#000]/[#000000]、白は[#fff]/[#ffffff]) ※rgb()指定の場合、黒はrgb(0,0,0)/rgb(0%,0%,0%)、白は[255,255,255]/[100%,100%,100%]) |
16進表現の3桁指定は、白や黒の場合は6桁指定の略記ともいえますが、実際には、色には輝度と深度があり、その内の色の濃さを意味する深度をRGBについてそれぞれ省いたものです。
ちなみに、RGB指定はガンマ値[γ][Γ][Γ]を基にしており、ガンマ2.2表示効果を基準に調節されています。
RGB指定で、下記のように設定範囲を超える値が記された時は、負の値の場合はゼロ、最大値を超える場合は最大値として扱われます。
|
◆各種RGB指定の例(red/赤の設定例) ・正しい設定 p { color: rgb(255,0,0) } ・範囲外の設定 p { color: rgb(300,0,0) } /*rgb(255,0,0)*/ p { color: rgb(255,-10,0) } /*rgb(255,0,0)*/ p { color: rgb(110%,0,0) } /*rgb(100%,0,0)*/ |
RGB指定にしろ、色名指定にしろ、可読性が損なわれては意味がありませんので可読性の高い前景の文字色と背景色のバランスが大切です。
CSS/スタイルシート情報
