背景色を指定する

background-color: 色指定


background プロパティは、背景の色を指定します。
色の値として「transparent」を指定すると、
背景色が透明になって下の背景が透けて見えるようになります。
ここで指定した色はボックスのマージン（常に透明）には適用されません。
背景色だけ指定していると、ユーザーが設定画面や独自のスタイルシートで
文字色を指定している場合などに、文字が読みにくくなってしまう場合があります。
その様な事を避けるために、背景色を指定する場合には文字色も同時に指定しましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">
<!--
body {
margin: 2em;
color: #ffffff;
background-color: #ff3300
}
h1 {
text-align:center;
color: #ffffff;
background-color: #000000
}
p {
padding: 1em;
color: #000000;
background-color: #ffcc00
}
div {
padding: 1em;
color: #000000;
background-color: #ffffff
}
table, input {
color: #ffffff;
background-color: #ff3300
}
caption, select {
color: #ffffff;
background-color: #333399
}
textarea {
color: #ffffff;
background-color: #339933
}
-->
</style>
</herd>
<body>
<h1>ｈ1要素・背景色を指定する</h1>
<p>
スタイルシートを使用すると、様々な要素の<br>
背景色を自由に設定することが出来ます。
</p>

<div>
<table border="2" cellpadding="8">
<caption>table要素</caption>
<tr><th>ヘッダセル</th><th>ヘッダセル</th><th>ヘッダセル</th></tr>
<tr><td>データセル</td><td>データセル</td><td>データセル</td></tr>
</table>
<p>
<textarea rows="4" cols="50">textarea要素</textarea>
</p>
<p>
<input type="text" value="input要素">
<input type="checkbox" name="chk" checked>
<input type="checkbox" name="chk">
<input type="radio" name="rdo" checked>
<input type="radio" name="rdo">
<select>
<option>select要素</option>
<option>option要素</option>
</select>
<input type="button" value="button">
</p>
</div>
</body>
</html>