【HTML】ul・ol・li でリストを作る方法｜順序なし・順序付き・入れ子リストを解説

箇条書きや手順の番号付きリストは、Webページでもっともよく使うパーツのひとつです。HTML では ul・ol・li という3つのタグを組み合わせてリストを作ります。この記事では、順序なしリスト・順序付きリストの基本から、ol の番号を制御する属性、入れ子（ネスト）のリスト、CSS でのマーカー調整までを、初心者の方にも分かるように順番に解説します。

リストを作る3つのタグ

HTML のリストは、リスト全体を囲む親要素と、その中に並ぶ各項目という2階層で作ります。親要素には「順序が関係ない箇条書き」用の ul と「順序が意味を持つ番号付き」用の ol の2種類があり、どちらの場合も各項目は li で表します。

つまり li は ul と ol で共通です。親を ul にすれば各項目の先頭に「・」のような点（マーカー）が付き、ol にすれば「1, 2, 3…」の連番が付く、という違いになります。

順序なしリスト（ul）の基本

並び順に意味がない箇条書きには ul を使います。商品の特徴、メニュー項目、注意事項の一覧などが典型例です。ul の中に li を並べるだけで作れます。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

ブラウザの初期スタイルでは、各項目の先頭に黒丸（disc）のマーカーが表示され、左に少し字下げ（インデント）されます。この丸の見た目や字下げは、あとで紹介する CSS で自由に変えられます。「りんご・みかん・ぶどう」のように、順番を入れ替えても意味が変わらないものは ul が適しています。

順序付きリスト（ol）の基本

手順やランキングのように、並び順そのものに意味があるリストには ol を使います。書き方は ul とほぼ同じで、親要素を ol に変えるだけです。

<ol>
  <li>材料を用意する</li>
  <li>生地を混ぜる</li>
  <li>オーブンで焼く</li>
</ol>

各項目の先頭に「1. 2. 3.」と自動で連番が振られます。番号は li を数えてブラウザが自動で付けるので、項目を途中に追加・削除しても番号を書き直す必要はありません。手順書やレシピなど「この順番でないと困る」内容は ol を選びましょう。

li（リスト項目）の中身

li の中には、テキストだけでなく段落・リンク・画像・さらに別のリストなど、さまざまな要素を入れられます。たとえば項目内にリンクを置いたり、補足の段落を加えたりできます。

<ul>
  <li><a href="/guide">使い方ガイド</a></li>
  <li>
    お問い合わせ
    <p>平日10時〜18時に対応します。</p>
  </li>
</ul>

ポイントは、こうした中身は必ず li の中に入れることです。ul や ol の直下（直接の子）に置けるのは li だけ、というルールがあります。この点はあとで詳しく触れます。

ol の番号を制御する属性

ol には、開始番号やマーカーの種類を変える属性が用意されています。「3番目から始めたい」「番号ではなくアルファベットにしたい」といった調整は、これらの属性で行えます。

type に指定できる値は、1（数字）・A（大文字英字）・a（小文字英字）・I（大文字ローマ数字）・i（小文字ローマ数字）の5種類です。たとえば次のように書くと、5番から始まる大文字アルファベットのリストになります。

<!-- E から始まる大文字アルファベットのリスト -->
<ol type="A" start="5">
  <li>項目その1</li>
  <li>項目その2</li>
</ol>

<!-- 特定の項目だけ番号を指定する -->
<ol>
  <li>1番目</li>
  <li value="10">ここから10番</li>
  <li>続いて11番</li>
</ol>

start に 5 を指定すると、type="A" では5番目の文字「E」から始まります（start は文字ではなく数値で指定します）。value は li 側に付ける属性で、その項目の番号を直接指定でき、それ以降の番号も連動して振り直されます。ランキングを途中から続けて表示したいときなどに便利です。

入れ子（ネスト）のリスト

リストの項目の中に、さらにリストを入れることを「入れ子（ネスト）」と呼びます。大項目の下に小項目をぶら下げたいときに使います。注意したいのは、子のリストは li の中に入れるという点です。ul の直下に ul を置くのではなく、親項目の li の閉じタグ </li> の手前に子リストを書きます。

<ul>
  <li>フロントエンド
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>バックエンド</li>
</ul>

子リストの親は ul でも ol でもよく、自由に組み合わせられます。実際の表示を確認してみましょう。次のデモは、入れ子の ul と、type を変えた入れ子の ol の見え方をまとめたものです。CSS タブやプレビューを切り替えて、ネストすると階層に応じてマーカーや字下げが変わる様子を確かめてください。

<h3>順序なしリスト（ul）と入れ子</h3>
<ul>
  <li>HTML
    <ul>
      <li>見出しタグ</li>
      <li>リストタグ</li>
    </ul>
  </li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h3>順序付きリスト（ol）と type</h3>
<ol type="A">
  <li>準備する</li>
  <li>手を動かす
    <ol type="1">
      <li>コードを書く</li>
      <li>動作を確認する</li>
    </ol>
  </li>
  <li>見直す</li>
</ol>

body {
  font-family: sans-serif;
  line-height: 1.7;
  padding: 16px;
}

h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  color: #007bff;
}

li {
  margin-bottom: 4px;
}

CSS でマーカーを変える

リスト先頭の点や番号（マーカー）の見た目は、CSS の list-style-type プロパティで変えられます。ul なら disc（黒丸）・circle（白丸）・square（四角）など、ol なら decimal（数字）・upper-alpha（大文字英字）・lower-roman（小文字ローマ数字）などを指定します。マーカーを消したいときは none を使います。

/* 黒丸を四角のマーカーに変える */
ul {
  list-style-type: square;
}

/* マーカーを消し、字下げもなくす */
.menu {
  list-style: none;
  padding-left: 0;
}

ナビゲーションメニューのように「リストだが点は表示したくない」場面では、list-style: none; でマーカーを消し、padding-left: 0; で初期の字下げも打ち消すのが定番です。マーカーの種類は前述の type 属性でも変えられますが、見た目に関わる指定は基本的に CSS 側にまとめておくと管理しやすくなります。

ul・ol・dl の使い分け

3種類のリストは、表したい情報の性質で選びます。判断の軸は「順序に意味があるか」「名前と値の対応か」です。

並び順に意味がない箇条書きなら ul です。特徴の列挙やメニューなど、順番を入れ替えても困らないものが当てはまります。順番そのものが意味を持つなら ol を使います。料理の手順やランキングのように、並びが変わると内容が変わってしまうものです。

これらとは別に、「用語：説明」のように名前と値が対になった情報には定義リスト（dl・dt・dd）が向いています。プロフィールや商品スペックのように項目名と内容がセットになるものは、ul で無理に表現するより dl の方が構造を素直に表せます。迷ったら「並列の項目なのか、それとも対応関係なのか」を考えると選びやすくなります。

リストを書くときに気をつけること

ul・ol の直下には li 以外を置かない

ul や ol の直接の子にできるのは li だけです。次のように ul の中へ直接 p や div を書くのは不正なマークアップになります。

<!-- NG: ul の直下に p を置いている -->
<ul>
  <p>説明文</p>
  <li>項目</li>
</ul>

<!-- OK: 中身は li の中に入れる -->
<ul>
  <li>
    項目
    <p>説明文</p>
  </li>
</ul>

段落でも画像でも入れ子のリストでも、リストに含めたいものはすべて li の中に書く、と覚えておけば間違いありません。

見た目の理由だけでリストを使わない

「字下げしたい」「点を付けたい」といった見た目の都合だけで ul を使うのは避けましょう。リストはあくまで「複数の項目の集まり」という意味を持つタグです。逆に、本来リストである箇条書きを p と br で並べて表現するのも、構造が伝わらないため好ましくありません。意味に合ったタグを選び、見た目は CSS で整えるのが基本です。

番号の連番は自動なので手で書かない

ol の番号はブラウザが自動で振ります。li のテキストに「1. 」「2. 」と自分で番号を書いてしまうと、項目を追加・削除したときに番号がずれてしまいます。開始位置や番号を変えたいときは、テキストに直接書くのではなく start や value 属性を使いましょう。

まとめ

HTML のリストは、ul・ol・li の組み合わせで作ります。要点を振り返っておきましょう。

• 順序なしは ul、順序付きは ol、各項目は共通の li
• ol は start・reversed・type、li の value で番号を制御できる
• 入れ子は子リストを li の中に書く
• マーカーの見た目や非表示は CSS の list-style で整える

「順序に意味があるか」を基準に ul と ol を選び、名前と値のペアなら dl を使う、という整理を覚えておくと、場面に応じて適切なリストを選べるようになります。まずは身近な箇条書きを正しいタグでマークアップするところから始めてみてください。

参考ページ

• <ul>: 順序なしリスト要素 – HTML | MDN
• <ol>: 順序付きリスト要素 – HTML | MDN
• <li>: リスト項目要素 – HTML | MDN
• list-style – CSS: カスケーディングスタイルシート | MDN