【HTML】箇条書きリスト（ul / ol / li）の構文とマークアップ規則

HTML

　HTMLで箇条書き（リスト構造）を実装する際の基本構文、およびコーディング時の注意点・ルール

1. 基本構文と使い分け

　リストを作成する際は、必ず「親要素（全体を囲むタグ）」と「子要素（各項目を囲むタグ）」の入れ子構造にする。

  • <li>（List Item）： リストの各項目を囲むタグ。必ず <ul> または <ol> の内側に配置する。
  • <ul>（Unordered List）： 順序のないリスト（ブラウザ既定値では黒丸 ・ が付く）。
  • <ol>（Ordered List）： 順序のあるリスト（ブラウザ既定値では 1. 2. 3... の数字が付く）。

2. ２つのリストの具体的な書き方

① 順序のないリスト（<ul> ＋ <li>）

並べる順番に決まりがない、一般的な箇条書きに使う。

HTML
<ul>
  <li>プログラミングの学習</li>
  <li>ブログ記事の執筆</li>
  <li>愛犬の散歩</li>
</ul>

② 順序のあるリスト（<ol> ＋ <li>）

料理のレシピや設定手順など、「順番が重要なステップ」を説明する時に使います。自動的に数字が割り振られるため、自分で「1.」「2.」と手入力する必要はありません。

HTML
<ol>
  <li>パソコンを開く</li>
  <li>エディタ（VSCodeなど）を起動する</li>
  <li>HTMLコードを書き始める</li>
</ol>

3. 実装時の重要規則（Tips / 注意点）

ルール1：<ul>や<ol>の直下には<li>しか入れてはいけない

　HTMLの仕様上、<ul> および <ol> の直下（子要素）に配置できるのは <li> タグ（または <template> などの特殊要素）のみである。
　直下にテキストをそのまま書いたり、<div> や <p> などの別タグを直接挟むのは構文エラー（マークアップ違反）となる。

  • ❌ 悪い例：
HTML
<ul> 💡 ここに直接メモを書いてはダメ！ <li>項目1</li> </ul>

* **⭕ 正しい例（メモなどもliの中に書く）：

HTML
<ul>
  <li>💡 項目1（ここにメモを書くならOK）</li>
</ul>

ルール2：リストのネスト（階層化）の構造

「大項目」の中に、さらに「小項目」を分けて書きたい時は、<li>タグの中に新しく<ul>や<ol>を丸ごと入れ込むことができます。

HTML
<ul>
  <li>Webデザインの勉強
    <ul>
      <li>HTMLの基本（いまココ）</li>
      <li>CSSの装飾</li>
    </ul>
  </li>
  <li>プログラミングの勉強</li>
</ul>

ルール3：ブログ記事では「3〜5項目」に絞る

備忘録としてのメモ書きであっても、1つのリスト内の項目が肥大化すると可読性が落ちるため、要点は1つのブロックにつき「3〜5項目」程度に集約させ、それ以上になる場合はセクション自体を分ける。

まとめ

  • 順序が不要なら <ul>、手順なら <ol> を選択しているか
  • <ul> や <ol> のすぐ下に <li> 以外のタグが紛れ込んでいないか
  • ネスト（入れ子）させる際、子リストが親 <li> の中に正しく収まっているか

コメント