HTML-CSS 入門講座

HTML-CSS 入門講座

Lesson-6
CSS で飾りを追加しましょう

目次

L6.1 はじめに

6.1.1 概要

  • CSSの中で飾りを追加するプロパティは、以下の分類があります。
    • バックグランド系プロパティ
    • テーブル系プロパティ
  • 特定のタグやコンテンツを指定するためのセレクタは、以下の分類があります。
    • 擬似クラス系セレクタ
    • 擬似要素系セレクタ

L6.2 バックグランド系プロパティ

L6.2.1 background-color プロパティ(背景色)

background-color: 背景色;

背景色を指定します。

背景色の範囲は「コンテンツ+パディング+ボーダー」の領域が対象になります。

背景色を指定する場合は同時に文字色も指定するようにしてください。使用する環境によっては背景色と文字色が近い色になって読みにくなってしまう場合があります。

背景色は、以下の型式で指定します。

transparent(初期値)
背景が透明になります。
色値
背景の色を指定します。

L6.2.2 background-attachment プロパティ(背景画像の位置)

background-attachment: 背景画像の位置;

背景画像をスクロールするかどうかを指定します。

背景画像の位置は、以下の型式で指定します。

fixed
背景画像の位置が固定されスクロールしても動かなくなります。
scroll
スクロールすると背景画像も移動します。

L6.2.3 background-image プロパティ(背景画像のファイル)

background-image: 背景画像ファイル;

背景画像を指定します。背景画像は、body タグだけでなく、p タグ、div タグ、span タグなどの要素にも使用できます。

背景画像は、「url('ファイルのパス名')」で背景画像ファイルのパス名を指定します。none(初期値)を指定すると背景画像を使用しないことを示します。

L6.2.4 background-repeat プロパティ(背景画像の繰り返し)

background-repeat: 背景画像の繰り返し;

背景画像の繰り返しの仕方を指定します。

背景画像の繰り返しは、以下の値で指定します。

repeat(初期値)
背景画像を繰り返して表示します。
repeat-x
背景画像を横方向のみ繰り返して表示します。
repeat-y
背景画像を縦方向のみ繰り返して表示します。
no-repeat
背景画像は 1 回だけの表示となり繰り返しません。

L6.2.5 background プロパティ(背景の一括指定)

background: 背景一括指定;

background-color プロパティ、background-attachment プロパティ、background-image プロパティ、background-repeat プロパティの値を一括して指定します。

背景一括指定は、「背景色・背景画像の位置・背景画像ファイル・背景画像の繰り返し」を順不同でスペースで区切って指定します。

L6.2.6 background-size プロパティ(背景画像のサイズ)

background-size: 背景画像のサイズ;

背景画像のサイズを指定します。

背景画像のサイズは、以下の値で指定します。

auto(初期値)
自動的に算出します。
contain
縦横比は保持して背景領域に収まるサイズになるように背景画像を拡大縮小します。
cover
縦横比は保持して背景領域を完全に覆うサイズになるように背景画像を拡大縮小します。
幅・高さ
背景画像の幅と高さをスペースで区切って指定します。
パーセンテージ
背景画像の幅と高さ(パーセンテージ)をスペースで区切って指定します。

L6.2.7 表示サンプル

バックグランド系プロパティを使用した表示サンプルを以下に示します。

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;

L6.3 テーブル系プロパティ

L6.3.1 border-collapse プロパティ(隣接セルの表示方法)

border-collapse: 隣接セルの表示方法;

テーブルの隣接するセルの表示方法を指定します。

隣接セルの表示方法は、以下の値で指定します。

collapse
隣接するセルのボーダーを重ねて表示します。
separate
隣接するセルのボーダーを間隔をあけて表示します。

L6.3.2 border-spacing プロパティ(隣接セルのボーダー間の間隔)

border-spacing: 隣接セルのボーダー間の間隔;

テーブルの隣接するセルのボーダー間の間隔を指定します。本プロパティは、border-collapse プロパティに separate が指定されている時に有効になります。

隣接セルのボーダー間の間隔は、複数指定でき指定した個数により対象位置が異なります。

1つ指定
「上下左右」のすべての指定になります。。
2つ指定
「左右」と「上下」の順で指定します。

L6.4 擬似クラス系セレクタ

L6.4.1 link 擬似クラス(未訪問リンクスタイル)

セレクタ:link { プロパティ名: 値; }

未訪問リンクのスタイルを指定します。

L6.4.2 visited 擬似クラス(訪問済リンクスタイル)

セレクタ:visited { プロパティ名: 値; }

訪問済リンクのスタイルを指定します。

L6.4.3 hover 擬似クラス(オンカーソルスタイル)

セレクタ:hover { プロパティ名: 値; }

オンカーソル時(要素にカーソルが乗った時)のスタイルを指定します。スマホの場合は対象の要素をタップしてから他の要素をタップするまでの間になります。

L6.4.4 active 擬似クラス(アクティブスタイル)

セレクタ:active { プロパティ名: 値; }

要素がアクティブになった時のスタイルを指定します。アクティブとは要素をクリックしてから離すまでの状態を示します。スマホの場合はタップしている間になります。

L6.4.5 first-child/last-child 擬似クラス(先頭・最終の子要素指定)


セレクタ: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;
}
 子1
 子2
 子3
 子4
 子5

L6.4.6 nth-child 擬似クラス(n 番目の子要素指定)

セレクタ:nth-child(n) { プロパティ名: 値; }

n 番目の子要素にスタイルを指定します。

n の部分は「(整数)・odd(奇数)・even(偶数)・(数式)」を指定することができます。

n の各値は、以下の型式で指定します。

(整数)
n 番目の子要素が対象になります。
odd(奇数)
奇数番目の子要素が対象になります。
even(偶数)
偶数番目の子要素が対象になります。
(数式)
子要素の対象を数式で指定します。例えば奇数の子要素の場合は「2n+1」、偶数の子要素の場合は「2n+0」となります。

使用例(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;
}
 子1
 子2
 子3
 子4
 子5

使用例(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;
}
 子1
 子2
 子3
 子4
 子5

L6.4.7 nth-of-type 擬似クラス(同一のセレクタを持つ n 番目の子要素指定)

セレクタ:nth-of-type(n) { プロパティ名: 値; }

n 番目の子要素にスタイルを指定します。nth-child 擬似クラスとの違いは、nth-child 擬似クラスは、n 番目の子要素が対象になりますが、nth-of-type 擬似クラスは同一のセレクタを持つ n 番目の子要素が対象になります。

n の部分は「(整数)・odd(奇数)・even(偶数)・(数式)」を指定することができます。

n の各値は、以下の型式で指定します。

(整数)
n 番目の子要素が対象になります。
odd(奇数)
奇数番目の子要素が対象になります。
even(偶数)
偶数番目の子要素が対象になります。
(数式)
子要素の対象を数式で指定します。例えば奇数の子要素の場合は「2n+1」、偶数の子要素の場合は「2n+0」となります。

使用例(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

 子3
 子4
 子5

L6.4.8 not 擬似クラス(指定値以外の要素指定)

セレクタ :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

 子3
 子4
 子5

使用例(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;
}
 子1
 子2
 子3
 子4
 子5

L6.5 擬似要素系セレクタ

L6.5.1 first-letter 擬似要素(要素の 1 文字目を指定)

セレクタ::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

L6.5.2 first-line 擬似要素(要素の 1 行目を指定)

セレクタ::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

L6.5.3 before/after 擬似要素(要素の直前・直後にコンテンツの挿入)


セレクタ::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

ロケット本体
PAGE
TOP
ロケット炎