第3章でリストと表について色々学んだけど、本当に身についているか確認したいです！
それなら実践的なクイズで確認してみよう！リストの使い分けや表の構造化、そしてそれらを組み合わせた実際のWebサイト作りまで、段階的に確認していこう。
クイズの後は、実際にリストと表を使って情報をうまく整理したサイトを作ってみたいです！
了解！リストと表は情報の「整理棚」のようなもの。上手に使えば、たくさんの情報でも見やすく、分かりやすく表示できるんだ。まずはクイズで基礎知識を確認して、そのあとで本格的な情報サイト作りに挑戦してみよう。
第3章まとめクイズ
第3章の重要ポイントを15問に凝縮した総合クイズだ。リスト・表・情報整理・セマンティクスの核心が網羅されているよ。落ち着いて取り組んでみよう。
第3章 総合まとめクイズ（15問）
<ol>
①材料を準備する①
①鍋にお湯を沸かす①
①麺を茹でる①
</ol>①
②HTML②
③ウェブページの構造を記述する言語③
②CSS②
③ウェブページの見た目を装飾する言語③
①<table>
①
②教科②
②点数②
①
①
③数学③
③85③
①
</table><table>
①
<tr><th>商品名</th><th>価格</th></tr>
①
②
<tr><td>りんご</td><td>100円</td></tr>
<tr><td>みかん</td><td>80円</td></tr>
②
</table><td ①="2">結合されたセル</td>実践：リストと表を活用した情報サイト作成
このセクションでは、第3章で学んだリストと表の知識を使って、情報を分かりやすく整理した本格的なWebサイトを作成します。入れ子のリスト、定義リスト、構造化された表を効果的に組み合わせてみましょう。
以下の手順とプレビューを参考に、自分でchapter3フォルダと各HTMLファイルを作成してみましょう。実際に手を動かすことで理解が深まります。
完成版のファイル一式をダウンロードしたい場合は、こちらをご利用ください：
chapter3.zip をダウンロードHTMLファイルの作成手順
まず、作成するファイルの全体構成を確認しましょう。
html-practice/
└── chapter3/
├── index.html (技術比較サイト - メインページ)
├── courses.html (講座案内ページ)
└── schedule.html (スケジュール表示ページ)「HTMLファイルを作ってみよう！」で作成した「html-practice」フォルダーをVS Codeで開きましょう。
HTMLファイルを作成するための手順を確認しましょう。
- VS Codeの「ファイル」→「フォルダーを開く」でデスクトップの「html-practice」フォルダーを選択してください。
- 「chapter3」フォルダを作成します
- 「chapter3」フォルダ内に新しいファイル「index.html」「courses.html」「schedule.html」を作成します
メインページ（index.html）の作成
まずはメインページを作ってみよう。様々なリストタイプを使い分けて、情報を構造化して表示しよう。
実装手順と確認ポイント
- 基本構造の作成
<!DOCTYPE html>から始まり、適切なメタデータとタイトルを設定する - ナビゲーションメニューの実装 他のページへのリンクを含む箇条書きリストを作成する
- 技術比較表の作成 thead・tbodyを使った構造化された表で技術情報を整理する
- 特徴リストの作成 入れ子のリストを使って、各技術の詳細特徴を階層的に表示する
講座案内ページ（courses.html）の作成
次は講座案内ページを作ってみよう。定義リストと番号付きリストを効果的に使ってみよう。
実装手順と確認ポイント
- 定義リストの実装 dl・dt・ddタグを使って講座の用語と説明を整理する
- 手順リストの作成 olタグで受講の流れを番号付きで分かりやすく表示する
- ナビゲーションの統一 全ページで一貫したナビゲーション構造を実装する
- 情報の階層化 見出しとリストを組み合わせて情報を構造的に表示する
スケジュール表示ページ（schedule.html）の作成
最後はスケジュール表示ページを作ってみよう。応用的な表のテクニックを使って実用的な表を作成しよう。
実装手順と確認ポイント
- 構造化された表の作成 caption・thead・tbodyを使った意味的に正しい表構造
- セル結合の実装 colspan・rowspanを使って実用的なスケジュール表を作成
- アクセシビリティの考慮 thタグのscopeプロパティを適切に設定
- 表の可読性向上 論理的なグループ化で情報を分かりやすく整理
全体のチェックリスト
- リストの適切な使い分け ul（箇条書き）・ol（番号付き）・dl（定義）を目的に応じて選択
- 入れ子構造の実装 階層的な情報を入れ子のリストで正しく表現
- 表の構造化 thead・tbody・thタグを使った意味的に正しい表構造
- セル結合の活用 colspan・rowspanで実用的な表レイアウトを実現
- ナビゲーションの一貫性 全ページで統一されたナビゲーション構造
- アクセシビリティ配慮 適切なマークアップでスクリーンリーダー対応
- 情報の階層化 見出し・リスト・表を組み合わせた構造的な情報表示
- リンク構造の確認 ページ間のナビゲーションが正しく動作
まとめ
お疲れ様！第3章のクイズと実践演習、両方ともよく頑張ったね。リストと表を使った情報整理はどうだった？
クイズで基礎を確認してから実践に進むと、「あ、これ習った内容だ！」って感じで、知識がしっかりつながりました！特に表の構造化が分かると、情報がすごく整理された感じがします。
定義リストや入れ子のリストを使うと、複雑な情報でも分かりやすく表示できることが分かりました！情報整理って、こんなに大切なんですね。
素晴らしい！今回の学習で、情報を構造化して見やすく表示する技術が身についたね。これで、どんなに複雑な情報でも、ユーザーが理解しやすい形で提示できるようになったよ。
- リストの使い分け ul・ol・dlを目的に応じて適切に選択できる
- 階層構造の表現 入れ子のリストで複雑な情報を整理できる
- 表の基本構造 table・tr・td・thを使った基本的な表を作成できる
- 表の構造化 thead・tbody・captionで意味的に正しい表を作成できる
- 応用テクニック セル結合や列グループ化などの高度な表現ができる
- 情報設計力 ユーザーが理解しやすい情報構造を設計できる
- アクセシビリティ すべてのユーザーに配慮した構造化ができる
- 実践的統合 学んだ技術を組み合わせて本格的なサイトを作成できる
第4章では、フォームを使ってユーザーからの入力を受け取る方法を学びます。情報の「表示」から一歩進んで、ユーザーとの「対話」ができるWebサイトを作れるようになりましょう！