さて昨日は、色つきの枠で文章を囲んだわけですが、そうなると中の背景を変えたくなるのが人情、人のなさけというものです。

昨日と同じように枠に色をつけた状態が下です。

---

---

上のソースはこうです。

---

<div style="border:1px solid #ff0000;padding:1em;">
広告：美容室のケアが自宅で簡単にできる７日間髪美人セット
広告：美白スキンケアを８４０円で試したい女性の方へ。ラサーナ潤い美肌トライアルセット
広告：オシッコをかけても数秒でニオイが消える驚異の消臭衣類デオル いい快互服ドットコム
広告：保管付きクリーニングなら美服パック
広告：面倒な会議議事録の書き起こしや、論文作成に最適！ 音声認識ソフト「AmiVoiceSP」
</div>

---

それでは、背景色をクリーム色にしてみます。
変更箇所のみ赤で表示します。

ソース

---

<div style="border:1px solid #ff0000;padding:1em;background:#ffffcc">
広告：美容室のケアが自宅で簡単にできる７日間髪美人セット
広告：美白スキンケアを８４０円で試したい女性の方へ。ラサーナ潤い美肌トライアルセット
広告：オシッコをかけても数秒でニオイが消える驚異の消臭衣類デオル いい快互服ドットコム
広告：保管付きクリーニングなら美服パック
広告：面倒な会議議事録の書き起こしや、論文作成に最適！ 音声認識ソフト「AmiVoiceSP」
</div>

---

上のソースを表示すると下のようになります。見てお分かりかと思いますが私は特に、オシッコをかけても数秒でニオイが消える驚異の消臭衣類デオルが注目です。これはオシッコがかかってしまってもということなのか、オシッコをあえてかけるようなプレイでも大丈夫という意味なのか、どっちなんでしょう？

---

表示結果

---

それでは大事なところを強調表示してみましょう。


borderとpaddingは昨日の記事で説明してあります。

新しいところはbackgroundですね。
バックグラウンド、背景です。色の指定方法も昨日の記事に書いてあります。
#ff0000が赤、#00ff00が緑、#0000ffが青です。#の後の６文字を変えていい色を配合してください。

ちなみに数値は0(ゼロ)からはじまって、９の次がaです。最後がf 。これは１６進数表現です。１６進数は１６番目で桁代わりするわけですが、数字をあらわす文字が0から9までの１０個しかない。そこで足りない分をaからf の６文字で表現しています。

では背景に画像を表示させるにはどうしたらよいでしょう？枠の中の背景に画像を使いたい！につづきます。