10/25 学科 HTML/CSS基礎⑤【オンライン】
宮本真伍本日のテーマ
レイアウト系プロパティを理解しましょう
💡 CSS・HTMLの基礎学習まとめ
🎯 擬似クラスセレクタ（CSS）
ユーザーの操作や要素の状態に応じてスタイルを変更するためのセレクタを習得。
:link：未訪問リンクのスタイル指定:visited：訪問済リンクのスタイル指定:hover：カーソルが乗ったときのスタイル指定:active：クリック中のスタイル指定:first-child/:last-child：親要素内の最初／最後の子要素を指定:nth-child(n)：n番目の子要素を指定:nth-of-type(n)：同じタグの中でn番目の要素を指定:not(selector)：指定したセレクタ以外の要素を選択
🧩 擬似要素セレクタ（CSS）
要素の一部や仮想的な部分にスタイルを適用する技術を習得。
::first-letter：最初の1文字にスタイルを適用::first-line：最初の1行にスタイルを適用::before/::after：要素の前後にコンテンツを挿入
📊 テーブル（表組）の作成方法（HTML＋CSS）
ECサイトや商品ページで必要となる表組みの構造とスタイル指定を習得。
table：表全体の定義caption：表のタイトル定義tr：行の定義th：見出しセルの定義td：データセルの定義border-collapse：セルの境界線の重なり方を指定border-spacing：セル間のスペース指定table-layout：セル幅の決定方法vertical-align：セル内の垂直位置指定display: tableを用いたレイアウト構築
💡 EC関連業務（楽天・Yahoo!ショッピング等）では、テーブルレイアウトが必要になる場面があるため、実務を想定した学習を実施。
📝 フォーム（入力UI）の作成方法（HTML）
ユーザー入力を受け付けるためのフォーム構造と各種要素の使い方を習得。
form：フォーム全体の定義label：入力項目のラベルinput：テキスト・チェックボックスなどの入力部品button：送信・操作ボタンselect/option/optgroup：選択式メニューdatalist：入力候補の表示textarea：複数行のテキスト入力欄
📐 フレックスレイアウト（CSS）
レスポンシブで柔軟なレイアウトを構築するためのFlexboxの基本を習得。
display: flex：Flexコンテナの定義flex-direction：アイテムの並び方向（row/column）flex-wrap：折り返しの有無flex-flow：並び順と折り返しの一括指定justify-content：水平方向の配置（左寄せ・中央・右寄せなど）align-items：垂直方向の配置（中央揃えなど）align-content：複数行の垂直方向の配置
