◆ はじめに

まず、文字色と背景関係のプロパティをお勉強いたしましょう。背景あっての文字色（前景）です。

従来、文字色はfont要素、背景関係はbody要素でやっていましたが、これからは、スタイルシートでやりましょう。時代は、スタイルシートです！

• スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
• スタイルシートのリファレンスは、こちらにありますので参照してください。
• 尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。

◆ colorとbackground-colorプロパティ

colorプロパティ

colorプロパティは、要素内の文字色（前景色）を設定するプロパティです。

適用要素	初期値	継承	対応ブラウザ
全要素	ブラウザ次第	yes	NN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-colorプロパティ

background-colorプロパティは、要素内の背景色を設定するプロパティです。
設定値は、色, transparent（背景を透明）。

適用要素	初期値	継承	対応ブラウザ
全要素	transparent	no	NN6.0,NN6.2,IE5.5,IE6.0,OP6.0

サンプル

ちゃいちゃんは「一生懸命生きること」実践したよ！
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ！

----------CSS2 ソース------------------------------------------------
p.sample {
	color: Navy;
	border: solid 1px #4444aa;
	padding: 1.2em;
	text-align: center;
}
.level1 {
	color: rgb(0,128,0);
	background-color: #aaffaa;
}
.level2 {
	color: #ff6600;
	background-color: #ffffff;
}
---------- HTML4.01 ソース -----------------------------------------
<p class="sample">
ちゃいちゃんは<em class="level1">「一生懸命生きること」</em>実践したよ！<br>
また、ちゃいちゃんは<em class="level2">「人の良いところ」</em>をどんどん見つけたよ！ 
<p>

補足

各プロパティの値、Navy、rgb(0,128,0)、#ff6600等は、単位と色を参照してください。

◆ background-image系のプロパティ

background-imageプロパティ

background-imageプロパティは、要素内の背景画像を設定するプロパティです。
値には、url()関数にて、画像URIを指定します。

適用要素	初期値	継承	対応ブラウザ
全要素	none	no	NN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-repeatプロパティ

background-repeatプロパティは、要素内の背景画像の並び方を設定するプロパティです。
値には、repeat（全面）,repeat-x(横方向）,repeat-y（縦方向）,no-repeat（一つのみ）があります。

適用要素	初期値	継承	対応ブラウザ
全要素	repeat	no	NN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-positionプロパティ

background-positionプロパティは、要素内の背景画像の表示位置を設定するプロパティです。
xy座標の値を順にスペースで区切って指定します。値は、実数値＋単位、%値、left,right,top,bottom,center等を指定できます。

適用要素	初期値	継承	対応ブラウザ
block-level and replaced elements	0% 0%	no	NN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-attachmentプロパティ

background-attachmentプロパティは、要素内の背景画像の固定配置を設定するプロパティです。
値には、fixed（位置を固定）、scroll（他の内容と共にスクロール）があります。

適用要素	初期値	継承	対応ブラウザ
全要素	scroll	no	NN6.0,NN6.2,IE5.5,IE6.0,OP6.0

サンプル

----------CSS2 ソース------------------------------------------------
div.sample {
	background-image: url("../img/chaichan_bana.gif");
	background-repeat: repeat-y; 
	background-position: right top; 
	color: Navy;
	border: solid 1px #4444aa;
	padding: 1.2em;
	text-align: center;
	margin: 10px 1% 10px 1%;
}
h1 {
	background-image: url("../img/V0.gif");
}
table {
	background-image: url("../img/V1.gif");
	text-align:left;
}
textarea {
	background-image: url("../img/V2.gif");
}
---------- HTML4.01 ソース -----------------------------------------
<div class="sample">
<h1>h1要素</h1>
<table border="1">
<caption>table要素</caption>
<tr><th>名前</th><th>ニックネーム</th></th>
<tr><td>沙友里</td><td>ちゃいちゃん</td></th>
<tr><td>康友</td><td>やちゅ〜</td></th>
<tr><td>成憲</td><td>まちゃ</td></th>
</table>
<br><br>
<textarea rows="4" cols="40">
textarea要素
</textarea>
</div>

注意

IE系では、テーブル要素の text-align は自分より親要素の方が優先されました。（バグかな）

OP6.0では、textarea要素の background-image は未対応のようです。

backgroundプロパティ

尚、backgroundプロパティで上記説明プロパティを一括に指定することができます。必要な値を任意の順にスペースで区切って指定します。

適用要素	初期値	継承	対応ブラウザ
全要素	not defined	no	NN6,IE5.5（NN6,IE5.5のみテスト）

body {
	background: white url("../img/V1.gif") center repeat-y
}