学科 CSS基礎⑥（疑似クラス・疑似要素）

前回の復習

本日の訓練内容

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

L6.4.1 link 疑似クラス（未訪問リンクスタイル）
セレクタ: link { プロパティ名: 値; }
L6.4.2 visited 疑似クラス
L6.4.3 hover 疑似クラス（オンカーソルスタイル）

スマホの場合は対照の要素をタップしてから他の要素をタップするまでの間h over 扱いとなるので注意

L6.4.4 active 疑似クラス（アクティブスタイル）

スマートフォンの場合は対象の要素をタップしている間のみ active 扱いとなるので注意。

L6.4.5 first-child / last-child 疑似クラス（先頭／最終の子要素指定）

メニューの各項目に border-bottom をつけるが最終項目のみ下線を除くなどの場合に使用する。わざわざ class 名をつける必要がなく編集もしやすい。

L6.4.6 nth-child 疑似クラス（n 番目の子要素指定）

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

L6.4.7 nth-of-type 疑似クラス（同一のセレクタを持つ n 番目の子要素指定）
セレクタ: nth-of-type(n) { プロパティ名: 値: }
L6.4.8 not 疑似クラス（指定値以外の要素指定）
L6.5 疑似要素セレクタ

L6.5.1 first-letter 疑似要素（要素の1文字目を指定）

セレクタ::first-letter { プロパティ: 値; }
L6.5.2 first-line 疑似要素（要素の1行目を指定）
セレクタ::first-line { プロパティ: 値: }
L6.5.3 before/after 疑似要素（要素の直前・直後にコンテンツの挿入）
セレクタ::before { プロパティ: 値;}
セレクタ::after { プロパティ: 値;}

要素の直前（::before）または直後部へのコンテンツの挿入を指定する。

ここで挿入されたコンテンツは検索の対象にならない。

メモ

ログイン ‹ 市松亭 — WordPress
ichimatsutei.shift869.com

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
テーブル作成プロパティについて

2限目
学科 CSS基礎⑥
擬似クラス系セレクタについて

3限目
学科 CSS基礎⑥
擬似要素系セレクタについて

4限目
学科 CSS基礎⑥
CSSのまとめ

5限目
学科 CSS基礎⑥
過去の訓練の復習

本日のテーマ

効率良いセレクタの記述方法を理解しましょう

テーブル作成プロパティについて

  • border-collapse プロパティ（隣接セルの表示方法）
  • border-spacing プロパティ（隣接セルのボーダー間の間隔）

参考サイト

疑似クラス・疑似要素 について

擬似クラスとは … 擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTML​の要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。

ワンポイントアドバイス

疑似クラス・疑似要素はここまで学んだ基本的なCSSを更に効果的に使う為の技術です。ここまで学んだ内容を復習しながら使うと良いでしょう。

サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）

疑似クラス系セレクタ

  • link 擬似クラス（未訪問リンクスタイル）
  • visited 擬似クラス（訪問済リンクスタイル）
  • hover 擬似クラス（オンカーソルスタイル）
  • active 擬似クラス（アクティブスタイル）
  • first-child/last-child 擬似クラス（先頭・最終の子要素指定）
  • nth-child 擬似クラス（n 番目の子要素指定）
  • nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
  • not 擬似クラス（指定値以外の要素指定）

擬似要素系セレクタ

  • first-letter擬似要素（要素の 1 文字目を指定）
  • first-line擬似要素（要素の 1 行目を指定）
  • before/after擬似要素（要素の直前・直後にコンテンツの挿入）

参考サイト

本日の課題①

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

本日の課題②

過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。