🚀 プログラミング学習

レッスン4：リストと表

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

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

📝 リストと表の書き方

箇条書きリスト：<ul> と <li>

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

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

番号付きリスト：<ol>

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

<ol>
  <li>金メダル：〇〇</li>
  <li>銀メダル：〇〇</li>
  <li>銅メダル：〇〇</li>
</ol>
タグ種類先頭の記号
<ul>順番なし（unordered list）・（点）
<ol>順番あり（ordered list）1. 2. 3.（番号）
<li>リストの各項目（list item）—

表：<table>

表を作るには <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>

💻 やってみよう！

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

<!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コースで枠線の付け方を学びます！

📌 まとめ

🚀 次のレッスンへ

次のレッスンでは、入力フォームを作る方法を学びます！

🔍 もっと調べてみよう：「HTML リスト 表 作り方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
← HTMLコース一覧に戻る