学科 HTML/CSS基礎⑤【オンライン】

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑦
CSSの疑似クラス、疑似要素について

2限目
学科 HTML/CSS基礎⑦
テーブル（表組）の作り方について

3限目
学科 HTML/CSS基礎⑦
フォーム（入力）の作り方について

4限目
学科 HTML/CSS基礎⑦
フレックスレイアウトについて

5限目
学科 HTML/CSS基礎⑦
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・疑似クラス、疑似要素、テーブルタグ、フォームタグ、フレックスレイアウトの概要を説明します。
・わかりにくいので具体的な例を示して説明してください。
・フレックスレイアウトについては使用する機会も多くなりますので実例を示して説明してください。

本日のテーマ

レイアウト系プロパティを理解しましょう

CSSの記述・検証ツールの活用

【まとめサイト】

【動画】

CSS：擬似クラス系セレクタ

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

参考サイト

CSS：擬似要素系セレクタ

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

参考サイト

テーブル（表組）の作り方について

  • テーブル（表組）の作り方
  • table 要素（表全体の定義）
  • caption 要素（主題の定義）
  • tr 要素（1 行範囲の定義）
  • th 要素（見出し項目の定義）
  • td 要素（データ項目の定義）
  • border-collapse プロパティ（隣接セルの表示方法）
  • border-spacing プロパティ（隣接セルのボーダー間の間隔）
  • table-layout プロパティ（セル幅の決定方法）
  • vertical-align プロパティ（垂直方向位置指定）
  • display を用いたテーブル構造

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォーム（入力）の作り方について

  • フォーム（入力）の作り方
  • 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 アイテム行の垂直位置）

参考サイト

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。