背景に色を付ける


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

背景をベタ塗りする

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

cssソース

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

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

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

背景を#f8f8f8に

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

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

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

  1. 直接カラー名を指定する
  2. 16進数で指定する
  3. rgb値で指定する

直接カラー名を指定する

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

cssソース

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

16進数で指定する

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

cssソース

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

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

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

rgb値で指定する

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

cssソース

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

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

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は省略します。

次は背景にグラデーションをかける

  1. 背景に色を付ける
  2. 背景にグラデーションをかける
  3. 画像をタイル状に配置する
  4. 画像を1枚表示する
  5. 画像で横ラインを引く
  6. 画像で縦ラインを引く
  7. 複数の画像を配置する
  8. 画像にグラデーションをかける