学科【オンライン】2025.9.27

授業内容

• CSSの疑似クラス、疑似要素について
• テーブル（表組）の作り方について
• フォーム（入力）の作り方について
• フレックスレイアウトについて
• 本日の講義のまとめ

習得内容

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

• CSSの疑似クラス、疑似要素について

文章構造の範囲外の情報を指定したり、セレクタ単体では指定できない状態を擬似的に選択して指定するセレクタを、擬似クラスという。擬似要素とは、要素の一部に対してスタイルを適用できる指定方法。擬似要素を使うと、HTMLには手を加えることなくスタイルを適用することができる。
※セレクタとは、どのHTML要素にスタイルを適用するかを指定できる。要素名（タグ名）、クラス名、ID名などを使ってHTML要素を特定する。

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

▢link 擬似クラス（未訪問リンクスタイル）
　▲表示例　クリックしていない時の色
　▲指定例　セレクタ:link { プロパティ名: 値; }

▢visited 擬似クラス（訪問済リンクスタイル）
　▲表示例　クリックすると色が変わる
　▲指定例　セレクタ:visited { プロパティ名: 値; }

▢hover 擬似クラス（オンカーソルスタイル）
　▲表示例　カーソルが重なると色が変わる
　▲指定例　セレクタ:hover { プロパティ名: 値; }

▢active 擬似クラス（アクティブスタイル）
　▲表示例　クリックしてから離すまでの状態で色が変わる
　▲指定例　セレクタ:active { プロパティ名: 値; }

▢first-child/last-child 擬似クラス（先頭・最終の子要素指定）
　▲表示例　一列目だけに色をつける、一番下の列だけ色を変える
　▲指定例　セレクタ:first-child { プロパティ名: 値; }
　　　　　　セレクタ:last-child { プロパティ: 値; }
　▲first-child/表示例

▢nth-child 擬似クラス（n 番目の子要素指定）
　▲表示例　２列目４列目の色を変える
　▲指定例　セレクタ:nth-child(n) { プロパティ名: 値; }
　　　　　　　n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定

▢nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
　▲表示例　１年１組の１０番目の男の子と女の子の色を変える
　▲指定例　セレクタ:nth-of-type(n) { プロパティ名: 値; }
　　　　　　　n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定

▢not 擬似クラス（指定値以外の要素指定）
　▲表示例　１年１組の男の子以外は赤にする
　▲指定例　セレクタ :not(x) { プロパティ名: 値; }

参考サイト　
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　L6.4 擬似クラス系セレクタ
https://html-css.hamaya2020.com/lesson-6.html#L6-4

■CSS：擬似要素系セレクタ
CSS3から：：（コロン）2つが主流

▢first-letter 擬似要素（要素の 1 文字目を指定）
　▲表示例　「おはようございます」の「お」だけ赤にする
　▲指定例　セレクタ::first-letter { プロパティ: 値; }

▢first-line 擬似要素（要素の 1 行目を指定）
　▲表示例　 1 行目の文章だけ大きくする
　▲指定例　セレクタ::first-line { プロパティ: 値; }

▢before/after 擬似要素（要素の直前・直後にコンテンツの挿入）
　▲表示例　 2行目の文章の前と後ろに★を入れる　※画像も配置可能
　▲指定例　セレクタ::before { プロパティ: 値; }
　　　　　　セレクタ::after { プロパティ: 値; }

参考サイト
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　L6.5 擬似要素系セレクタ
https://html-css.hamaya2020.com/lesson-6.html#L6-5

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

テーブル関連の要素（タグ）やプロパティを使用すると色々な形態のテーブル構造を作成することができる。display プロパティを使用することでテーブル関連の要素（タグ）を使用しなくてもテーブル構造を作成することもできる。料金表やテーブルメニューの制作に向いている。tableで作ると重たくなったりSEO対策に問題がある為、現在の主流はdivで作る。

■table 要素（表全体の定義）
　▢指定例　<table>（テーブルの定義情報）</table>

■caption 要素（主題の定義）
　▢指定例　<caption>（主題の定義情報）</caption>

■tr 要素（1 行範囲の定義）※Table Row の略
　▢指定例　<tr>1 行範囲の定義情報</tr>

■th 要素（見出し項目の定義）※Table Header の略
　▢指定例　<th>見出し項目の定義情報</th>

■td 要素（データ項目の定義）※Table Data の略
　▢指定例　<td>データ項目の定義情報</td>

■border-collapse プロパティ（隣接セルの表示方法）
　▢表示例　隣接するセルのボーダーを重ねて表示
　▢指定例　border-collapse: 隣接セルの表示方法;

■border-spacing プロパティ（隣接セルのボーダー間の間隔）
　▢指定例　border-spacing: 隣接セルのボーダー間の間隔;
　　　　　　1つ指定「上下左右」のすべての指定になる。2つ指定「左右」と「上下」の順で指定する。
　　　　　　※border-collapse プロパティに「separate」が指定されている時に有効

■table-layout プロパティ（セル幅の決定方法）
　▢指定例　table-layout: セル幅の決定方法;
　　　　　　auto‥‥セル幅を自動でレイアウト
　　　　　　fixed‥‥セル幅を固定でレイアウト。fixed を指定するとテーブルの最初の行を読み込んだ時点で各
　　　　　　　　　　セルのコンテンツ幅が決定される。

■vertical-align プロパティ（垂直方向位置指定）
　▢指定例　vertical-align: 垂直方向位置;　※ブロック要素には適用さロック要素には適用されれない
　　　　　　baseline‥‥要素の下端をフォントのベースラインに揃える。
　　　　　　top‥‥‥‥ 要素の上端を行の上端に揃える。
　　　　　　middle‥‥ 要素を行の中央に揃える。
　　　　　　bottom‥‥ 要素の下端を行の下端に揃える。

参考サイト
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson-7 テーブルを活用しましょう
https://html-css.hamaya2020.com/lesson-7.html#L7-1

■display を用いたテーブル構造
display プロパティを用いることで table 関連要素と同等の構造を定義することができる。下記のように柔軟な表示型式を指定することができる。CSSでの記述となる。CSSで表を作るときは現在はflexboxを使用している。

• コンテンツの属性を明確にすることができる。
• vertical-align プロパティを使用することで上下中央や下揃えが指定できる。
• table-layout プロパティを使用することでセルを均等幅にすることができる。
• 特定のセルだけに幅を指定することで固定幅と可変幅のセルを定義することができる。
• セルの高さを揃えることができる。（揃えることしかできない）

参考サイト
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　L7.4 display を用いたテーブル構造
https://html-css.hamaya2020.com/lesson-7.html#L7-4

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

■form 要素（フォーム作成）
Web サーバーに情報を送信するための入力フォームを定義する。子要素にパーツを組み込むことでユーザーが操作可能なページを提供する。この機能を使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する必要がある。

■label 要素（入力項目キャプション）
　▲指定例　<label for=”関連付けるid属性”> 入力項目キャプションコンテンツ </label>

■input 要素（フォーム構成部品）
※input 要素は、type 属性によって入力内容や表示形式が異なる。

■button 要素（ボタン）
ボタンを定義。多くのボタンは、form 要素に関連付けて使用されるが、この button 要素は、文章の中に自由に配置することもできる。また、JavaScript と組み合わせることで色々な用途に使用することもできる。
button 要素でサーバーへの送信を行う場合は、form 要素の子要素として配置されているか form 要素に関連付けられている必要がある。
button 要素で定義するボタンは、input 要素で定義するボタンと類似しているが、input 要素で定義するボタンよりもスタイルシート（CSS）での適用がしやすくなっていて疑似要素の適用も可能。

■select 要素（セレクトボックス）
選択式のメニュー（セレクトボックス）を定義できる。複数の項目を並べて、その中から任意の項目を選択することができる。
選択項目は、select 要素の子要素に option 要素を使用して定義する。option 要素を配置する時に optgroup 要素を使用して項目をグループ化することもできる。

■datalist 要素（入力候補選択肢）
入力項目の選択肢候補になる選択肢やオプションを定義できる。複数の項目を並べて、その中から任意の項目を選択することができる。
選択項目は、datalist 要素の子要素に option 要素を使用して定義する。datalist 要素で作成した選択肢候補は、datalist 要素の id 属性で定義した id 名を対象の input 要素の list 属性で指定することで関連付けを行う。
　▲指定例　<datalist> 入力候補選択肢コンテンツ </datalist>

■optgroup 要素（セレクトボックス選択肢グループ）
入力項目の選択肢候補になる選択肢のグループを定義します。select 要素の子要素として配置する option 要素をグループ化してグループ見出しを指定することができる。
　▲指定例
　　<optgroup label=”グループ見出し” disabled> セレクトボックス選択肢グループコンテンツ </optgroup>
　　label‥‥グループ化した項目のグループ見出しを指定。
　　disabled‥‥項目が無効であることを指定。

■option 要素（セレクトボックス選択肢）
入力項目の選択肢候補になる選択肢を定義。select 要素や datalist 要素の子要素として配置。
　▲指定例
　<option value=”送信値” label=”選択肢表示項目” disabled selected> セレクトボックス選択肢コンテンツ
　</option>
　value‥‥選択した時に送信される値を指定する。省略時は option 要素の中に含まれる文字列が値になる。
　label‥‥選択肢として表示される値を指定する。省略時は option 要素の中に含まれる文字列が表示される。
　disabled‥‥項目が無効であることを指定する。論理値で値はない。
　selected‥‥あらかじめ選択されている項目であることを指定。論理値で値はない。

■textarea 要素（複数行テキスト編集項目）
複数行の文字入力項目を定義。一行の入力項目を定義する場合は、input 要素でも定義可能。

参考サイト
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　L2.11 フォーム
https://html-css.hamaya2020.com/lesson-2.html#L2-11-1

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

フレックスレイアウトとは、Flexible Box Layout Module のことで、その名の通りフレキシブルで簡単にレイアウトが組める。
項目の横並びは、float や inline-block でもできるがフレックスレイアウトを使用すると色々なレイアウトが簡単に出来る。
フレックスレイアウトのメリットは「① CSSがシンプルな記述で済む、② 垂直方向の位置を柔軟に調整できる、③ CSSだけで並び順や折り返しを簡単に調整できる」などがある。
Flexboxは一方向のレイアウト、CSS Gridは多次元のレイアウト。違いに気を付けて、更新作業の際にどちらか判断しておかないと、レイアウトが崩れる場合があるので注意する。

参考サイト
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson-8 フレックスレイアウトを活用しましょう
https://html-css.hamaya2020.com/lesson-8.html

■フレックスレイアウトの作り方
▢HTMLの一例
フレックスレイアウトでは、親要素を Flex コンテナ、子要素を Flex アイテムと呼ぶ。親子関係が出来れば ul などの他のタグでも構成可能。

<p>Flexコンテナ（親要素）</p>
<div class="container">
	<div class="item">Flexアイテム-1（子要素-1）</div>
	<div class="item">Flexアイテム-2（子要素-2）</div>
	<div class="item">Flexアイテム-3（子要素-3）</div>
</div>

▢CSSの一例
親要素に「display: flex;」を指定すると親要素は、block 属性になり子要素が横並びになる。親要素に「display: inline-flex」を指定すると親要素は、inline-block 属性になる。
※block属性（p,div,ul,h1～h6 タグなどの初期値）　inline-block属性（img タグなどの初期値）。

.container {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}

.item {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}

■display（Flex コンテナ作成）
　▢指定例　display: flex;
　　　　　　display: inline-flex;
　▢表示例　display: flex;

■flex-direction（Flex アイテム並び順）
　▢指定例　flex-direction: row;（初期値）　※Flex アイテムを水平方向に左から右へと配置
　▢指定例　flex-direction: row-reverse;　※Flex アイテムを水平方向に右から左へと配置
　▢指定例　flex-direction: column;　※Flex アイテムを垂直方向に上から下へと配置
　▢指定例　flex-direction: column-reverse;　※Flex アイテムを垂直方向に下から上へと配置　

■flex-wrap（Flex アイテム折り返し）
　▢指定例　flex-wrap: nowrap;（初期値）※Flex アイテムを折り返さずに一列に配置
　▢指定例　flex-wrap: wrap;　※複数行の Flex アイテムを上から下へと配置
　▢指定例　flex-wrap: wrap-reverse;　※複数行の Flex アイテムを下から上へと配置

■flex-flow（Flex アイテム並び・折り返し一括指定）
　▢指定例　flex-flow: row-reverse wrap;　※flex-direction と flex-wrap を一括で指定

■justify-content（Flex アイテム水平位置）
　▢指定例　justify-content: flex-start;（初期値）　※Flex アイテムを左揃えで配置
　▢指定例　 justify-content: flex-end;　※Flex アイテムを右揃えで配置
　▢指定例　 justify-content: center;　※Flex アイテムを左右中央揃えで配置
　▢指定例　  justify-content: space-between;
　　　　　　※両端の Flex アイテムを余白を空けずに配置し他の要素は均等に間隔を空けて配置
　▢指定例　  justify-content: space-around;　※両端の Flex アイテムも含めて均等な間隔を空けて配置

　▢表示例　 justify-content: flex-end;

　▢表示例　 justify-content: center;

　▢表示例　  justify-content: space-between;

■align-items（Flex アイテム垂直位置）
　▢指定例　 align-items: stretch;（初期値）※Flex アイテムを上下の余白を埋めるように配置
　▢指定例　 align-items: flex-start;　※Flex アイテムを上揃えで配置
　▢指定例　align-items: flex-end;　※Flex アイテムを下揃えで配置
　▢指定例　align-items: center;　※Flex アイテムを上下中央揃えで配置
　▢指定例　align-items: baseline;　※Flex アイテムをベースラインに合わせて配置

■align-content（Flex アイテム行の垂直位置）
　▢指定例　 align-content: stretch;（初期値）※Flexアイテムの行を余白を埋めるように配置
　▢指定例　align-content: flex-start;　※Flex アイテムの行を上揃えで配置
　▢指定例　align-content: flex-end;　※Flex アイテムの行を下揃えで配置
　▢指定例　align-content: center;　※Flex アイテムの行を上下中央揃えで配置
　▢指定例　align-content: space-between;
　　　　　　※最上行と最下行の Flex アイテムを余白を空けずに配置し他のアイテム行は均等に間隔を空けて配置
　▢指定例　align-content: space-around;　※すべての Flex アイテム行が均等に間隔を空けて配置

• 本日の講義のまとめ

参考サイト
　これからのCSSレイアウトはFlexboxで決まり！https://www.webcreatorbox.com/blog/flexbox
↑参考サイトでフレックスレイアウトを復習しました。表示できたWebページは上記の各項目に配置してあります。