スタイルシートでの色の指定方法
色の指定方法の種類
スタイルシートでは文字の色を変えたり、背景に色を付けることが出来ます。このとき、色の指定が必要になりますが、CSSでは大きく分けて『カラー名』による指定と、『数値(RGB)』による指定の2種類に分かれます。さらに、後者の『数値(RGB)』による指定方法は、細かく4種類に分かれます。
カラー名による指定
カラー名による指定は、以下の表のように、赤なら「red」、黒なら「black」のように指定できます。カラー名が直接、表示色になっていますので、実際の色をつかみやすいという利点がある反面、指定できる色が限られますので、微妙な色表現はできないのが欠点です。なお、CSSレベル1ではカラー名は16色が割り当てられています。
|
数値(RGB)による指定
微妙な色表現を実現するには、より細かい数値による設定が必要です。色の3原色は「Red」、「Green」、「Blue」ですが、各原色をさらに256の色に分け、それぞれに16進数を割り当てたものが、RGBによる指定方法です。各原色は256通り表現が可能ですから、色全体では「256×256×256」で約1677万色の表現が可能です。ただし、閲覧する環境がこの色数に対応していることが条件となります。
なお、CSSではこのRGBによる指定は以下の4種類の方法があります。全て半角英数字で記述します。( )カッコや「rgb」間のスペースの有無は関係ありません。
|
サンプル
h1 { color:red; }
h3 { color:#fff ; }
h3 { color:#008000 ; }
h4 { color:rgb(0,126,255) ; }
h5 { color:rgb(10%,30%,100%) ; }
各見出しの色を確認してみよう。
サンプル
