background-color: 背景色;背景色を指定します。
背景色の範囲は「コンテンツ＋パディング＋ボーダー」の領域が対象になります。
背景色を指定する場合は同時に文字色も指定するようにしてください。使用する環境によっては背景色と文字色が近い色になって読みにくなってしまう場合があります。
背景色は、以下の型式で指定します。
background-attachment: 背景画像の位置;背景画像をスクロールするかどうかを指定します。
背景画像の位置は、以下の型式で指定します。
background-image: 背景画像ファイル;背景画像を指定します。背景画像は、body タグだけでなく、p タグ、div タグ、span タグなどの要素にも使用できます。
背景画像は、「url('ファイルのパス名')」で背景画像ファイルのパス名を指定します。none（初期値）を指定すると背景画像を使用しないことを示します。
background-repeat: 背景画像の繰り返し;背景画像の繰り返しの仕方を指定します。
背景画像の繰り返しは、以下の値で指定します。
background: 背景一括指定;background-color プロパティ、background-attachment プロパティ、background-image プロパティ、background-repeat プロパティの値を一括して指定します。
背景一括指定は、「背景色・背景画像の位置・背景画像ファイル・背景画像の繰り返し」を順不同でスペースで区切って指定します。
background-size: 背景画像のサイズ;背景画像のサイズを指定します。
背景画像のサイズは、以下の値で指定します。
background-position: 背景画像の表示開始位置;背景画像の表示開始位置を指定します。
背景画像の表示開始位置は、top、bottom、left、right、center、百分率（%）、ピクセル値（px）などで指定します。百分率やピクセル値を使用する場合は、水平方向、垂直方向の順で指定します。初期値は、0% で水平方向、垂直方向のどちらかを指定しなかった場合の初期値は、center になります。
バックグランド系プロパティを使用した表示サンプルを以下に示します。
CSS
background: url('images/hamaya.png') pink no-repeat;
CSS
background: url('images/hamaya.png') pink no-repeat;
background-size: contain;
CSS
background: url('images/hamaya.png') pink no-repeat;
background-size: cover;
CSS
background: url('images/hamaya.png') pink no-repeat;
background-size: 100px;
CSS
background: url('images/hamaya.png') pink;
background-size: 100px;
CSS
background: url('images/hamaya.png') pink;
background-size: 100px;
background-attachment: fixed;
CSS
background: url('images/background01.jpg') pink;
background-size: cover;
background-attachment: fixed;
border-collapse: 隣接セルの表示方法;テーブルの隣接するセルの表示方法を指定します。
隣接セルの表示方法は、以下の値で指定します。
border-spacing: 隣接セルのボーダー間の間隔;テーブルの隣接するセルのボーダー間の間隔を指定します。本プロパティは、border-collapse プロパティに separate が指定されている時に有効になります。
隣接セルのボーダー間の間隔は、複数指定でき指定した個数により対象位置が異なります。
セレクタ:link { プロパティ名: 値; }未訪問リンクのスタイルを指定します。
セレクタ:visited { プロパティ名: 値; }訪問済リンクのスタイルを指定します。
セレクタ:hover { プロパティ名: 値; }オンカーソル時（要素にカーソルが乗った時）のスタイルを指定します。スマホの場合は対象の要素をタップしてから他の要素をタップするまでの間になります。
セレクタ:active { プロパティ名: 値; }要素がアクティブになった時のスタイルを指定します。アクティブとは要素をクリックしてから離すまでの状態を示します。スマホの場合はタップしている間になります。
セレクタ:first-child { プロパティ名: 値; }
セレクタ:last-child { プロパティ: 値; }
先頭（first-child）・最終（last-child）の子要素にスタイルを指定します。
使用例（HTML）
<div class="pclass1">親
<div> 子1</div>
<div> 子2</div>
<div> 子3</div>
<div> 子4</div>
<div> 子5</div>
</div>
使用例（CSS）
.pclass1 div:first-child {
color: red;
}
.pclass1 div:last-child {
color: blue;
}
セレクタ:nth-child(n) { プロパティ名: 値; }n 番目の子要素にスタイルを指定します。
n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定することができます。
n の各値は、以下の型式で指定します。
使用例（HTML）
<div class="pclass2">親
<div> 子1</div>
<div> 子2</div>
<div> 子3</div>
<div> 子4</div>
<div> 子5</div>
</div>
使用例（CSS）
.pclass2 div:nth-child(2) {
color: red;
}
.pclass2 div:nth-child(4) {
color: blue;
}
使用例（HTML）
<div class="pclass3">親
<div> 子1</div>
<div> 子2</div>
<div> 子3</div>
<div> 子4</div>
<div> 子5</div>
</div>
使用例（CSS）
.pclass3 div:nth-child(even) {
color: red;
}
.pclass3 div:nth-child(odd) {
color: blue;
}
セレクタ:nth-of-type(n) { プロパティ名: 値; }n 番目の子要素にスタイルを指定します。nth-child 擬似クラスとの違いは、nth-child 擬似クラスは、n 番目の子要素が対象になりますが、nth-of-type 擬似クラスは同一のセレクタを持つ n 番目の子要素が対象になります。
n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定することができます。
n の各値は、以下の型式で指定します。
使用例（HTML）
<div class="pclass4">親
<p> 子1</p>
<p> 子2</p>
<div> 子3</div>
<div> 子4</div>
<div> 子5</div>
</div>
使用例（CSS）
.pclass4 div:nth-child(3) {
color: red;
}
.pclass4 div:nth-of-type(3) {
color: blue;
}
子1
子2
セレクタ :not(x) { プロパティ名: 値; }親要素内で x を含まない要素を指定します。例えば、「div :not(p) { color: #f00; }」と指定すると、親要素（div タグ）内にある子要素の中で p タグ以外の要素が対象になります。
使用例（HTML）
<div class="pclass5">親
<p> 子1</p>
<p> 子2</p>
<div> 子3</div>
<div> 子4</div>
<div> 子5</div>
</div>
使用例（CSS）
.pclass5 :not(p) {
color: red;
}
子1
子2
使用例（HTML）
<div class="pclass6">親
<div> 子1</div>
<div> 子2</div>
<div> 子3</div>
<div> 子4</div>
<div> 子5</div>
</div>
使用例（CSS）
.pclass6 {
width: 200px;
}
.pclass6 :not(:last-child) {
border-bottom: 1px #333 solid;
}
擬似クラスの使用方法を習得するためのサンプルコードです。
サンプルコードを使用して擬似クラスの使用方法を理解してください。
擬似クラス サンプルコードは、以下をクリックしてダウンロードして使用してください。
ダウンロードしたファイルは圧縮されていますので解凍してから使ってください。
index.html をブラウザで開いてデベロッパーツール（検証ツール）を使って指示に従い CSS（pseudo.css）のプロパティを設定してください。
設定する値がわからないときは、pseudo-mihon.css にコメントとして記載してありますので確認してください。
セレクタ::first-letter { プロパティ: 値; }要素の 1 文字目を指定します。
使用例（HTML）
<div class="pelement1">
<p>サンプル1<br>サンプル2<br>サンプル3<br>サンプル4<br>サンプル5</p>
</div>
使用例（CSS）
.pelement1 p::first-letter {
font-size: 2em;
color: red;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
セレクタ::first-line { プロパティ: 値; }要素の 1 行目を指定します。
使用例（HTML）
<div class="pelement2">
<p>サンプル1<br>サンプル2<br>サンプル3<br>サンプル4<br>サンプル5</p>
</div>
使用例（CSS）
.pelement2 p::first-line {
font-size: 2em;
color: red;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
セレクタ::before { プロパティ: 値; }
セレクタ::after { プロパティ: 値; }
要素の直前（::before）または直後（::after）へのコンテンツの挿入を指定します。
実際に挿入するコンテンツは、content プロパティで指定します。
使用例（HTML）
<div class="pelement3">
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
<p>サンプル4</p>
<p>サンプル5</p>
</div>
使用例（CSS）
.pelement3 p::before {
content: "◆";
padding-right: 5px;
color: skyblue;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
使用例（HTML）
<div class="pelement4">
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
<p class="new">サンプル4</p>
<p class="new">サンプル5</p>
</div>
使用例（CSS）
.pelement4 p.new::after {
content: "New";
padding: 0 5px;
margin-left: 10px;
font-size: 0.9em;
color: white;
vertical-align: top;
background: red;
border-radius: 5px;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
擬似要素の使用方法を習得するためのサンプルコードです。
サンプルコードを使用して擬似要素の使用方法を理解してください。
擬似要素 サンプルコードは、以下をクリックしてダウンロードして使用してください。
ダウンロードしたファイルは圧縮されていますので解凍してから使ってください。
index.html をブラウザで開いてデベロッパーツール（検証ツール）を使って指示に従い CSS（pseudo.css）のプロパティを設定してください。
設定する値がわからないときは、pseudo-mihon.css にコメントとして記載してありますので確認してください。
