レッスン4：リストと表

⏱ 約25分やってみよう 1 クイズ 1

📋 前提知識：レッスン3：リンクと画像を完了してください

🎯 このレッスンで学ぶこと

ulとliで箇条書きリストを作れます。
olとliで番号付きリストを作れます。
table・tr・th・tdで表を作れます。

📖 前回の復習（レッスン3）

<a href="URL"> でリンクを作る
<img src="パス" alt="説明"> で画像を表示する
パスには「相対パス」と「絶対パス」の2種類がある

📖 導入 — 情報を「整理」して見せよう

「好きな食べ物ベスト3」「今週の時間割」「ゲームのランキング」…こういった情報を文章で書くと読みにくいですよね。HTMLには、情報をきれいに整理して見せるためのリストと表のタグがあります。使いこなせると、ページがぐっと見やすくなります！

📝 リストと表の書き方

箇条書きリスト：`}> と `}>

順番に意味がない箇条書きには <ul> を使います。<ul> は「リストの入れ物」、<li> は「リストの1項目」です。

<ul>
  <li>サッカー</li>
  <li>読書</li>
  <li>ゲーム</li>
</ul>

▶ プレビュー

入れ子リスト（リストの中にリスト）

<li> の中にさらに <ul> を入れると、階層構造のリストが作れます。

<ul>
  <li>果物
    <ul>
      <li>りんご</li>
      <li>バナナ</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>にんじん</li>
      <li>トマト</li>
    </ul>
  </li>
</ul>

▶ プレビュー

💡 入れ子リストの使いどころ:
・サイトのナビゲーションメニュー（カテゴリ → サブカテゴリ）
・目次（章 → 節）
・ファイル構造の表示
入れ子は何段でも深くできますが、3段以上は読みにくくなるので避けましょう。

番号付きリスト：`}>

順番に意味があるリストには <ol> を使います。書き方は <ul> と同じで、入れ物を <ol> に変えるだけです。

<ol>
  <li>金メダル：【名前】</li>
  <li>銀メダル：【名前】</li>
  <li>銅メダル：【名前】</li>
</ol>

▶ プレビュー

タグ	種類	先頭の記号
`<ul>`	順番なし（unordered list）	・（点）
`<ol>`	順番あり（ordered list）	1. 2. 3.（番号）
`<li>`	リストの各項目（list item）	—

表：`}>

表を作るには <table>・<tr>・<th>・<td> の4つのタグを組み合わせます。

タグ	役割
`<table>`	表全体の入れ物
`<tr>`	表の1行（table row）
`<th>`	見出しのセル（table header）。太字・中央揃えで表示される
`<td>`	データのセル（table data）

<table>
  <tr>
    <th>名前</th>
    <th>教科</th>
  </tr>
  <tr>
    <td>【名前】</td>
    <td>数学</td>
  </tr>
</table>

▶ プレビュー

⚠️ テーブルはデータ表示専用！レイアウトには使わない
昔はテーブルでページ全体のレイアウトを作っていましたが、今はCSSの Flexbox や Grid を使います。

理由:
・スクリーンリーダーがテーブルを「表」として読み上げるため、レイアウトに使うと視覚障害のある人が混乱する
・CSSの方がレスポンシブ対応しやすい

テーブルは「時間割」「成績表」「料金表」など、本当に表形式のデータを表示するときだけ使いましょう。

💡 thead / tbody（予告）:
大きな表では <thead>（見出し行）と <tbody>（データ行）で分けると、構造が明確になります。CSSで見出し行だけ色を変えるのも簡単になります。今は覚えなくてOKですが、実際のサイトで見かけたら「ああ、あれか」と思い出してください。

💡 表に枠線をつけるには:
CSSで table, th, td { border: 1px solid #ccc; border-collapse: collapse; } と書くと枠線が表示されます。border-collapse は枠線を1本にまとめる設定です。CSSコースで詳しく学びます。

💻 やってみよう！

VS Codeで my-practice フォルダの index.html を開いてください。（前のレッスンのファイルを上書きして使います）

index.html の <body> を以下のように書き換えてください。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>リストと表の練習</title>
  </head>
  <body>
    <h1>リストと表</h1>

    <h2>好きな食べ物（箇条書き）</h2>
    <ul>
      <li>ラーメン</li>
      <li>カレー</li>
      <li>寿司</li>
    </ul>

    <h2>好きな食べ物ランキング（番号付き）</h2>
    <ol>
      <li>ラーメン</li>
      <li>カレー</li>
      <li>寿司</li>
    </ol>

    <h2>時間割（表）</h2>
    <table>
      <tr>
        <th>時間</th>
        <th>月</th>
        <th>火</th>
        <th>水</th>
      </tr>
      <tr>
        <td>1時間目</td>
        <td>国語</td>
        <td>数学</td>
        <td>英語</td>
      </tr>
      <tr>
        <td>2時間目</td>
        <td>数学</td>
        <td>理科</td>
        <td>社会</td>
      </tr>
    </table>
  </body>
</html>

💡 表に枠線がないと少し見づらいですね。CSSコースで枠線の付け方を学びます！

自由課題:

時間割に木曜・金曜の列を追加してみよう
好きなものの入れ子リスト（カテゴリ → 具体例）を作ってみよう
「今日やること」を <ol> で番号付きリストにしてみよう

✅ 正しく表示されると、こうなります：
・「リストと表」という大きな見出しが表示される
・箇条書きリスト（・ラーメン・カレー・寿司）が表示される
・番号付きリスト（1.ラーメン 2.カレー 3.寿司）が表示される
・時間割の表が表示される（枠線はまだありません。CSSコースで追加します）

⚠️ よくあるミス

<li> を <ul> や <ol> の外に書いてしまう：<li> は必ず <ul> か <ol> の中に入れましょう。入れ物なしで使うのはNGです。
表のセル数が行ごとにバラバラ：1行目が3列なら、2行目以降も3列にしましょう。列の数が合わないと表が崩れます。
<th> と <td> を混同する：<th> は見出しセル（太字になる）、<td> はデータセルです。1行目の項目名には <th> を使いましょう。