◆オンライン訓練（25/10/24）

講師：小谷祥吾先生
カリキュラム資料：なし

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

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

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

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

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

◆本日のテーマ

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

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

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

参考サイト

• 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！
• CSSの擬似クラスを使いこなそう
• 【CSS】疑似クラスとは？初心者向けにわかりやすく３分で解説

▼CSS：擬似要素系セレクタ

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

参考サイト

• 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！
• CSSの擬似要素で擬似的に要素を追加しよう
• 【CSS】疑似要素とは？初心者向けにわかりやすく３分で解説

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

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

参考サイト

• HTML tableタグを初心者向けに解説&便利な知識5選 | Udemy …
• ホームページのレイアウトはテーブルではなくCSSを使う理由 …
• 【HTML table】表を作成する基本からレイアウトの方法までを解説
• https://www.webcreatorbox.com/blog/flexbox

ワンポイントアドバイス

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

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

• フォーム（入力）の作り方
• form 要素（フォーム作成）
• label 要素（入力項目キャプション）
• input 要素（フォーム構成部品）
• button 要素（ボタン）
• select 要素（セレクトボックス）
• datalist 要素（入力候補選択肢）
• optgroup 要素（セレクトボックス選択肢グループ）
• option 要素（セレクトボックス選択肢）
• textarea 要素（複数行テキスト編集項目）

参考サイト

• 【初心者向け】0からformがわかる｜HTMLでのフォーム作成
• HTML入門【タグ】～入力フォームを作成してみよう～
• 【HTML】form：入力フォームの作成方法を３分で解説

▼フレックスレイアウトについて

• フレックスレイアウトの作り方
• display（Flex コンテナ作成）
• flex-direction（Flex アイテム並び順）
• flex-wrap（Flex アイテム折り返し）
• flex-flow（Flex アイテム並び・折り返し一括指定）
• justify-content（Flex アイテム水平位置）
• align-items（Flex アイテム垂直位置）
• align-content（Flex アイテム行の垂直位置）

参考サイト

• CSSのFlexboxとは？横並びレイアウトの新定番になるかも！
• 【図解】ちゃんと理解するフレックスボックス【CSS】
• 日本語対応！CSS Flexboxのチートシートを作ったので配布します

◆本日の課題

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

１．昨日の復習

①margin（外側の余白）の相殺
　marginの相殺は上下で発生。大きい数値を優先する。
②marginの一括指定
　margin:0_auto_0_auto;　上下0、左右自動で中央配置
　margin:50px_autto;　上下50px、左右自動で中央配置
③padding（内側の余白）
　padding:50px_0_0_50px;
　padding:0_50px;
④バックグランド系プロパティ
　background-image:ur(“../neko.jpg”);　背景画像のファイルを指定「../」は現在の階層の外にあるファイルのパス
　background:　背景画像の一括指定
⑤テキスト系プロパティ
　text-align:center;　文字の配置
　display:block;　spanタグをブロックに変える
　display:none;　スマホ画面では表示させない等

２．CSS：疑似クラス系セレクタ
①hover オンカーソルの時に赤色になる
　　a:hover{
　　　color:red;
　　}
②first-child/last-child　先頭・最終の子要素に赤色にする指
　　li:last-child{
　　　color:red;
　　}

３．HTML：テーブル（表組）の作り方
　要素の説明。時刻表や楽天市場サイト等で使われている

４．HTML：フォームの作り方
　要素の説明のみ。メール送信まで行うには別のものが必要

５．CSS：フレックスレイアウト
display:flex;　フレックスコンテナの作成
justify-centet:space-around;　フレックスアイテムを水平方向均等に
align-items:centaer;　フレックスアイテムを垂直方向の中央へ
親要素に上記を記載する
参考サイト　日本語対応！CSS Flexboxのチートシートを作ったので配布します

◆本日の気付き・メモ

フレックスボックスの仕組みを覚えたら、色々なレイアウトが出来るという事は分かったが、自分にそのコードがスラスラ書けるのだろかと心配になった。
自宅PCにTeraPadをインストールしたが、HTMLファイルやCSSファイルが、デスクトップにも所定のフォルダにも保存出来ない。その為、自宅で試す事が出来ずにいて、授業終了後に小谷先生に相談した。原因は分からないが、ダウンロードフォルダ以外に新しい形式のファイルの保存が出来ない設定になっている？！色々難しい…。