色の指定方法の種類
スタイルシートでは文字の色を変えたり、背景に色を付けることが出来ます。
このとき、色の指定が必要になりますが、CSSでは大きく分けて『カラー名』による指定と、『数値(RGB)』による指定の2種類に分かれます。
さらに、後者の『数値(RGB)』による指定方法は、細かく4種類に分かれます。
カラー名による指定
カラー名による指定は、以下の表のように、赤なら「red」、黒なら「black」のように指定できます。
カラー名が直接、表示色になっていますので、実際の色をつかみやすいという利点がある反面、指定できる色が限られますので、微妙な色表現はできないのが欠点です。
なお、CSSレベル1ではカラー名は16色が割り当てられています。
色 | 表示色 | カラー名 | RGB |
---|---|---|---|
白 | white | #ffffff | |
銀色 | silver | #c0c0c0 | |
灰色 | gray | #808080 | |
黒 | black | #000000 | |
栗色 | maroon | #800000 | |
赤 | red | #ff0000 | |
紫 | purple | #800080 | |
明るい紫 | fuchsia | #ff00ff | |
緑 | green | #008000 | |
ライム | lime | #00ff00 | |
オリーブ | olive | #808000 | |
黄色 | yellow | #ffff00 | |
藍色 | navy | #000080 | |
青 | blue | #0000ff | |
青緑 | teal | #008080 | |
水色 | aqua | #00ffff |
数値(RGB)による指定
微妙な色表現を実現するには、より細かい数値による設定が必要です。
色の3原色は「Red」、「Green」、「Blue」ですが、各原色をさらに256の色に分け、それぞれに16進数を割り当てたものが、RGBによる指定方法です。
各原色は256通り表現が可能ですから、色全体では「256×256×256」で約1677万色の表現が可能です。
ただし、閲覧する環境がこの色数に対応していることが条件となります。
なお、CSSではこのRGBによる指定は以下の4種類の方法があります。
全て半角英数字で記述します。
( )カッコや「rgb」間のスペースの有無は関係ありません。
書き方(半角) | 解説 |
---|---|
#rgb | 赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「0〜9、a〜f」までの16段階で示す |
#rrggbb | 赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「00〜99、aa〜ff」までの256段階で示す。最も一般的な指定方法 |
rgb(r,g,b) | 赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「0〜255」までの256段階の数字で示す。 |
rgb(r%,g%,b%) | 赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「0〜100%」までの101段階のパーセントで示す。 |
サンプル
h1 { color:red; }
h2 { color:#fff ; }
h3 { color:#008000 ; }
h4 { color:rgb(0,126,255) ; }
h5 { color:rgb(10%,30%,100%) ; }
各見出しの色を確認してみよう。
サンプル