Ⅲ-２　コンテンツの背景に色を付ける

１）文章の背景に色を付けます

<p>～</p>の中に書いた文章に、背景色を設定します
p{～}にbackground-colorの設定を追加します。
ここでは「;background-color:#dbe9dd」とします

２）文章の周りに余白を入れます

文章の周りに余白を入れて、背景と文字の間にゆとりを入れます。
余白はpaddingで設定します。ここでは２０ピクセルとします。
p{～}の中に「;padding:20px」を追加します

<html>
<head>
<title>色探しの旅</title>
<style type="text/css"></style>
</head>
<body>

<div align="center">
<h1>色探しの旅『Sky&Water』</h1>

<p>日本の四季には色が満ちています。<span class="sora">空</span> そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p>

<div class="copy">copyright(c)sora</div>
</div>
</body>
</html>

３）コピーライト部分にクラス名を付けます

コピーライト部分にも背景色を指定することにします。
しかし<div>～</div>の中にあるため、他の<div>～</div>と区別しなけらばなりません
そこで、<div>にclassを追加し、コピーライト部分に「copy」というクラス名を付けます。
「class="copy"」と書きます

４）コピーライト部分の背景に色を付けます

まずコピーライト部分のデザイン設定を書く場所として「div.copy{}」を追加します。
次に背景色を指定するため、background-colorの設定を追加し、色の値「#377c5f」を指定します
「background-color:#377c5f」と書きます

５）コピーライト部分の文字色を変更します

コピーライト部分に背景色を付けたことで、文字が読みづらくなりました。
そこで文字色を変更するため、div.copy{～}にcolorの設定を追加し、色の値を「#ffffff」にします
「;color:#ffffff」と書きます。！！『;』は設定の追加記号『:』は値を入れる記号です。

６）コピーライト部分の文字を小さくします

コピーライト部分を小さくするため、div.copy{～}にfont-sizeの設定を追加して、値を「smaller」と指定します
「;font-size:smaller」と書きます。

７）コピーライト部分の文字のまわりに余白を入れます

文章の部分と同じようにここにも少し余白を入れます
div.copy{～}の中にpaddingの設定を追加し、値を「2px」と指定します
「;padding:2px」と書きます

８）コピーライト部分の背景色の横幅を狭くします

コピーライト部分の背景色が画面の横幅のいっぱいに表示されています
div.copy{～}の中にwidthの設定を追加し３０パーセントに縮めます
「;width:30%」を追加します

９）コンテンツまわりの余白の設定{padding｝

paddingを使うことで、コンテンツのまわりに余白を入れることが出来ます
コンテンツのまわりに余裕を持って背景色を指定したい場合などに便利です

１０）コンテンツの横幅と背景色の表示範囲

コンテンツに背景色を設定した場合、
背景色が表示される範囲は、コンテンツの横幅によって決まります
*横幅を指定していないコンテンツ
<h1>や<h1p>、<div>で囲んだ部分は、標準の横幅が１００％として扱われます
そのため、横幅を指定していないコンテンツにbackground-colorを設定すると、
画面の横幅いっぱいに背景色が表示されます
*横幅を指定したコンテンツ
「width:50%」と指定することで、コンテンツは横幅画面の５０％になります
すると、背景色も画面の半分の位置までしか表示されなくなります

※background-color設定できる値

数値（pxなど）ピクセルなどの数値で指定します

割合(%）横幅に対する割合で指定します

１１）文字の背景に色を付ける

背景色の設定は文章中の文字に対しても設定できます
ここでは<span>～</span>で囲みspan{～}で背景色を設定します
クラス名を付けて塗り分けても良いでしょう【参考】

数値（pxなど）	ピクセルなどの数値で指定します
割合(%）	横幅に対する割合で指定します

Ⅲ-２ コンテンツの背景に色を付ける