気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
CSS / Cascading Style Sheets / スタイルシート

CSS文法[色・カラー]

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
CSSの色・カラーとは?

CSSスタイルシート文法[色・カラー]

<< CSSのカウンター

CSSの色・カラーは

 CSSの色・カラーは以下の通りです。

※このページは、W3C4 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]の値を3つまたは6つ並べた値か、[ rgb( ) ]を利用して[ 0~255 ]の範囲の数値を入れるか、[ 0.0%~100.0% ]の比率で指定します。

 16進数表現[0-9a-fA-F]の値を3つ並べた場合または、[ rgb( ) ]を利用して[ 0~255 ]の範囲の数値を入れるか、[ 0.0%~100.0% ]の比率で指定した場合には、最初の1つがR[red/赤]、2つめがG[green/緑]、3つめがB[blue/青]の指定で、16進数表現[0-9a-fA-F]の値を6つ並べた値の場合には、最初の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の角度・時間・周波数

CSS/スタイルシート情報

ウェブ造ホーム前へ次へ