HTML-CSS入門講座

濱屋太郎

Lesson-6

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

目次

6.1 はじめに

6.1.1 概要

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

6.2 バックグランド系プロパティ

6.2.1 バックグラウンド関連プロパティ

(1) background-colorプロパティ(背景色)

background-color: (背景色);

背景色を指定します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(5) backgroundプロパティ(背景の一括指定)

back-ground: (背景一括指定);

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

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

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

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

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

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

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

6.3 テーブル系プロパティ

6.3.1 テーブル関連プロパティ

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

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

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

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

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

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

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

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

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

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

6.4 疑似クラス系セレクタ

6.4.1 疑似クラス関連セレクタ

(1) link疑似クラス(未訪問リンクスタイル)

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

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

(2) visited疑似クラス(訪問済リンクスタイル)

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

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

(3) hover疑似クラス(オンカーソルスタイル)

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

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

(4) active疑似クラス(アクティブスタイル)

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

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

(5) first-child/last-child疑似クラス(先頭・最終の子要素指定)


(セレクタ):first-child { (プロパティ名): (値) }
(セレクタ):last-child { (プロパティ): (値) }

先頭(first-child)・最終(last-child)の子要素にスタイルを指定します。

(6) nth-child疑似クラス(n番目の子要素指定)

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

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

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

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

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

(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」となります。

(8) not疑似クラス(指定値以外の要素指定)

(セレクタ):not(x) { (プロパティ名): (値) }

親要素内でxを含まない要素を指定します。例えば、「div:not(p) { color: #f00; }」と指定すると、親要素(divタグ)内にある子要素の中でpタグ以外の要素が対象になります。

6.5 疑似要素系セレクタ

6.5.1 疑似要素関連セレクタ

(1) first-letter疑似要素(要素の1文字目を指定)

(セレクタ)::first-letter { (プロパティ): (値) }

要素の1文字目を指定します。

(2) first-line疑似要素(要素の1行目を指定)

(セレクタ)::first-line { (プロパティ): (値) }

要素の1行目を指定します。

(3) before/after疑似要素(要素の直前・直後にコンテンツの挿入)


(セレクタ)::before { (プロパティ): (値) }
(セレクタ)::after { (プロパティ): (値) }

要素の直前(::before)または直後(::after)へのコンテンツの挿入を指定します。

実際に挿入するコンテンツはcontentプロパティで指定します。