背景に色を塗ろう！（background-color プロパティ）

使用プロパティセレクタ { background-color: 背景色; }

CSS一覧プロパティ辞典 … background-color プロパティ

background-color プロパティを使うと要素の背景色を指定できます。値には、「red」や「green」などの色名やカラーコードなどを入力します。色の指定方法はこちら（Webページでの色の指定方法）を参考にしてください。

背景色を指定したため文字が見づらくなってしまう場合があります！

例えば、「見づらいでしょ？」のように文字の背景色が濃い青で文字色が黒だと何が書いてあるかわかりづらいです。「」の中には「見づらいでしょ？」と書いてあります。では、文字色を白に変えてみましょう！「見やすくなった！」
このように背景色のため文字が見やすくなったり逆に見づらくなったりします。背景色を指定する場合は文字色にも注意しましょう！

使用例

ではページの背景色（薄い茶色）、ついでに見出しの背景色（オレンジ）も指定していきましょう！

記述例
<html> <head> <title>一人暮らしの前向き料理</title> <style type="text/css"> span { font-weight: bold;} p { line-height: 1.7em; } p .copy { font-family: "ＭＳＰ明朝", serif; } body { background-color: moccasin;} h1 { background-color: orange;} </style> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> ワンポインを紹介します！</p> <p>おいしいチャーハンの作り方</p> <p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p> </body> </html>

使用例の表示

[background-colorプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.

[background-colorプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.