学科 CSS基礎⑥

-本日のアジェンダ-

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

本日の課題②

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