背景に色を付ける

bodyのbackground（背景）に色を付ける方法を見てみましょう。

背景をベタ塗りする

今回ホームページの背景は薄い灰色にします。
スタイルシートのソースは、こういう書き方になります。

cssソース

/*====ホームページの背景色====*/
body {
    background: #f8f8f8;
}

bodyの背景ですから、画面全面を#f8f8f8で色をつける、という書き方です。

では、やってみましょう。。

背景を#f8f8f8に

backgroundは背景を指定するプロパティなのでbodyだけでなく、上の行のように文字の背景、ホームページを表示する領域の背景、その他の背景を指定できます。

ユーザー側から見ると、背景は白、文字は黒、これが目に優しく疲れないのは言うまでもありません。

さて、その背景ですが、色の指定には3種類の方法があります。
1つずつ見ていきましょう。

この指定は例えばred、yellow、blue、blackなど直接カラー名を使うことができます。
例えば、yellowを指定するとプロパティ、値はこういう書き方になります。

cssソース

/*====参考====*/
    background: yellow;

これは初めのソースで書いた通りです。

cssソース

/*====参考====*/
    background: #ff0;

16進数表示では短縮した表示方法があります。
例えば、#ff0は#ffff00を短縮しています。

#ffff00　#00ffffのように同じ文字が2つずつ並んでいるときは文字を1個にまとめて短縮することができます。
例えば、#ff00ffは#f0fというように。
ただし、#ff51cdをfが2つ並んでいるからといって#f51cdとすることはできません。

色の3原色はご存じですよね？
rgbとは
r————–red（赤）
g————–green（緑）
b————–blue（青）
を0～255の数値で表したものです。
値に黄色を指定した場合

cssソース

/*====参考====*/
    background: rgb(255,255,0);

r、g、bの順に,で区切っています。
rgb値を使うときはネット上に16進数、rgb値変換サービスがありますので利用するとよいでしょう。

rgb値を使って色の不透明度を指定できます。

この場合はrgbにa（Alpha透明度）を付け加えてrgbaとします。

不透明度は0(完全透明)～1(完全不透明)までの数値を使います。
例えば、不透明度を25%にする場合は0.25と指定します。
透明度ではなく、不透明度であることに注意してください。

cssソース

/*====参考====*/
    background: rgba(255,255,0,0.25)

例、不透明度25%の書き方

色を指定するときは、直接カラー名を指定する、16進数で指定する、このどちらかを使うといいでしょう。

では、黄色#ff0を使ってまとめてみましょう。
色表示と不透明度も併せて比べてみてください。

yellow　#ff0　rgba(255,255,0,0)　不透明度0%

yellow　#ff0　rgba(255,255,0,0.25)　不透明度25%

yellow　#ff0　rgba(255,255,0,0.5)　不透明度50%

yellow　#ff0　rgba(255,255,0,0.75)　不透明度75%

yellow　#ff0　rgb(255,255,0)　不透明度100%(デフォルト)

透明度0(不透明度1)はデフォルトであり、Alphaは省略します。