基本知識

【HTML基礎講座 第3回】リストと箇条書き：情報をスッキリ整理して見せる技術

HTML基礎講座 全10回（第3回）

リストと箇条書き：情報をスッキリ整理して見せる技術

第3回では、Webサイトの箇条書きやメニューリストを構築するための「リストタグ（ul, ol, dl）」について、実践的な使い分けとコーディング手法をマスターします。

📌 講座ロードマップ一覧（クリックで移動）

1. 順序なしリスト（ulタグ）の基本

項目の並び順に特別な意味（優先順位や手順など）がない箇条書きを作る場合は、ul（Unordered List）要素を使用します。

リストの各項目は、必ず li（List Item）要素で囲んで表現します。

HTMLコード 
<ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>オレンジ</li>
</ul>

ブラウザで表示すると、各項目の先頭に黒いポッチ（箇条書きマーク）が表示されます。

2. 順序ありリスト（olタグ）で手順を示す

料理のレシピや、操作手順、ランキングなど、順序が重要である場合は、ol（Ordered List）要素を使用します。各項目はulと同様に `li` タグで囲みます。

HTMLコード 
<ol>
    <li>お湯を沸かす</li>
    <li>麺を茹でる</li>
    <li>スープを入れて完成</li>
</ol>

ブラウザでは、自動的に先頭に「1, 2, 3…」と連番が割り振られて表示されます。

💡 olタグの応用属性

・開始番号を変える: `

    ` とすると5番からカウントを開始します。
    ・逆順にする: `
      ` と指定するとカウントダウン（3, 2, 1）順で自動表示されます。

3. 説明リスト（dl, dt, dd）の仕組み

「用語」と「その説明」をセットで表現したい場合には、dl（Description List）要素を使用します。

  • <dl>: リスト全体を囲むコンテナ。
  • <dt>: 用語や名前（Description Term）。
  • <dd>: 用語の説明や詳細（Description Details）。
HTMLコード 
<dl>
    <dt>HTML</dt>
    <dd>Webサイトの骨組みを作るマークアップ言語。</dd>
    <dt>CSS</dt>
    <dd>Webサイトの見た目やデザインを整える言語。</dd>
</dl>

4. リストの入れ子（ネスト）構造

大分類の中に小分類を含めるように、リストの中にさらにリストを入れることを「ネスト（入れ子）」と呼びます。

HTMLコード 
<ul>
    <li>プログラミング言語
        <ul>
            <li>JavaScript</li>
            <li>Python</li>
        </ul>
    </li>
    <li>マークアップ言語
        <ul>
            <li>HTML</li>
        </ul>
    </li>
</ul>

⚠️ ネスト作成時の最重要ルール

初心者が非常によく間違えるポイントとして、「`

    `の直下には`
  • `しか置いてはいけない」というルールがあります。
    入れ子の `
      ` を書くときは、必ず親の `
    • ` タグの内部（閉じタグ </li> の手前）に記述してください。`
    • `のすぐ外に `
        ` を配置してしまうのは構文エラーになります。

✍️ 第3回 理解度チェック（問題）

`<ul>` タグの直下に直接置いて良いタグ（要素）はどれでしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

箇条書きや用語説明などのリストタグを使うことで、Webサイト上の情報をすっきりと論理的に整理できるようになりました。

次回（第4回）は、「他のページへ自由に繋ぐ リンクとナビゲーション（aタグ）」をテーマに、Webの醍醐味であるハイパーリンクの書き方を解説します！

📖 HTMLの基礎を全10回でマスターする

🔑 第3回 理解度チェックの解答と解説

【解説】

正解は <li> タグのみです。`<ul>` や `<ol>` の直下には、箇条書きの各項目を表す `<li>` タグしか配置できません。他のタグや文章を記述したい場合は、必ず `<li>` の中に記述する必要があります。

関連記事