-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑦
CSSの疑似クラス、疑似要素について
2限目
学科 HTML/CSS基礎⑦
テーブル（表組）の作り方について
3限目
学科 HTML/CSS基礎⑦
フォーム（入力）の作り方について
4限目
学科 HTML/CSS基礎⑦
フレックスレイアウトについて
5限目
学科 HTML/CSS基礎⑦
本日の講義のまとめ
本日のテーマ
レイアウト系プロパティを理解しましょう
メモ：
・親子、入れ子関係
・background背景について
・インライン
・text-align
・display:none;(スマートフォンとPC表示について。displayの非表示)
CSS：擬似クラス系セレクタ
- link 擬似クラス（未訪問リンクスタイル）
- visited 擬似クラス（訪問済リンクスタイル）
- hover 擬似クラス（オンカーソルスタイル）★
- active 擬似クラス（アクティブスタイル）
- first-child/last-child 擬似クラス（先頭・最終の子要素指定）★
- nth-child 擬似クラス（n 番目の子要素指定）★
- nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
- not 擬似クラス（指定値以外の要素指定）
テーブル（表組）の作り方について
- テーブル（表組）の作り方
- table 要素（表全体の定義）★（時刻表の作成）
- caption 要素（主題の定義）
- tr 要素（1 行範囲の定義）
- th 要素（見出し項目の定義）
- td 要素（データ項目の定義）
- border-collapse プロパティ（隣接セルの表示方法）
- border-spacing プロパティ（隣接セルのボーダー間の間隔）
- table-layout プロパティ（セル幅の決定方法）
- vertical-align プロパティ（垂直方向位置指定）
- display を用いたテーブル構造
フォーム（入力）の作り方について
HPのお問い合わせホームで使われる。PHPと連動する。
- フォーム（入力）の作り方
- form 要素（フォーム作成）
- label 要素（入力項目キャプション）
- input 要素（フォーム構成部品）
- button 要素（ボタン）
- select 要素（セレクトボックス）
- datalist 要素（入力候補選択肢）
- optgroup 要素（セレクトボックス選択肢グループ）
- option 要素（セレクトボックス選択肢）
- textarea 要素（複数行テキスト編集項目）
★フレックスレイアウトについて
横並びの調整ができる。
微調整が可能。
- フレックスレイアウトの作り方
- display（Flex コンテナ作成）★
- flex-direction（Flex アイテム並び順）
- flex-wrap（Flex アイテム折り返し）
- flex-flow（Flex アイテム並び・折り返し一括指定）
- justify-content（Flex アイテム水平位置）
- align-items（Flex アイテム垂直位置）
- align-content（Flex アイテム行の垂直位置）★
日本語対応！CSS Flexboxのチートシートを作ったので配布します
制作物：
