学科 CSS基礎⑦

-本日のアジェンダ-

1限目
学科 CSS基礎⑦
はみ出した領域の表示について

2限目
学科 CSS基礎⑦
文字の折り返しについて

3限目
学科 CSS基礎⑦
テキストの回り込みについて

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

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

本日のテーマ

文書レイアウトを制御しましょう

はみ出した領域の表示について

  • overflowプロパティ

overflowは、これまでのタグでも注意は必要でしたが、特に気を付ける事としてブラウザ依存する（ブラウザ毎にデザインが異なる）という点に注意しましょう。

サンプルファイル（ overflow見本）

参考サイト

文字の折り返しについて

  • overflow-wrap（文章が領域の端に来た時に、単語の途中で改行するかどうかの設定）
  • word-break（長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定）

参考サイト

テキストの回り込みについて

  • floatプロパティ
  • shape-outsideプロパティ

参考サイト

本日の課題①

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

本日の課題②

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

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

本日の課題②

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