この記事の要点

HTML のリスト要素は <ul> (順序なし)・<ol> (順序あり)・<dl> (定義リスト) の 3 種 項目は <ul>/<ol> の直下に <li>、<dl> の直下に <dt>+<dd> マーカー (・ や 1. 2. 3.) の見た目は HTML の type 属性ではなく CSS の list-style で制御するのが現代流 ネストすると階層構造を表現できる。リストインリスト (li の中に ul) は OK Tailwind / Material UI などの CSS フレームワークはリストをデフォルトでリセットし、独自スタイルを当てる

3 種類のリスト要素

要素	用途	マーカー (既定)
<ul> (Unordered List)	順序の無い箇条書き	・(disc)
<ol> (Ordered List)	順序が意味を持つ手順・ランキング	1. 2. 3. (decimal)
<dl> (Description List)	用語と説明のペア	なし

<ul> 順序なしリスト

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

順序が意味を持たない箇条書き全般に使います。買い物リスト・メニュー・ナビゲーションメニューなど。

<ol> 順序ありリスト

<ol>
  <li>ログイン画面を開く</li>
  <li>ID とパスワードを入力</li>
  <li>「ログイン」ボタンをクリック</li>
</ol>

<!-- 開始番号を変更 -->
<ol start="5">
  <li>5 番目から始まる</li>
  <li>6</li>
</ol>

<!-- 逆順 -->
<ol reversed>
  <li>3 として表示</li>
  <li>2</li>
  <li>1</li>
</ol>

手順・ランキング・章番号など、順序が意味を持つケースで使います。start / reversed 属性で番号を制御できます。

<dl> 定義リスト

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language の略。Web ページの構造を記述する言語。</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets の略。HTML 文書の見た目を指定する言語。</dd>

  <dt>JavaScript</dt>
  <dd>Web ブラウザで動的な処理を実現するプログラミング言語。</dd>
</dl>

用語集・FAQ・メタデータ (著者・公開日・カテゴリ) など「キーと値のペア」を意味的に表すときに使います。1 つの <dt> に対し複数の <dd>、また逆も可能です。

type 属性は廃止 → CSS で制御

古い HTML では <ul type="disc"> や <ol type="A"> といったマーカー指定が可能でしたが、HTML5 では非推奨です。CSS の list-style-type を使います。

/* マーカーの形状 */
ul.disc    { list-style-type: disc; }       /* ● */
ul.circle  { list-style-type: circle; }     /* ○ */
ul.square  { list-style-type: square; }     /* ■ */
ul.none    { list-style-type: none; }       /* なし */

ol.decimal       { list-style-type: decimal; }       /* 1.2.3. */
ol.lower-alpha   { list-style-type: lower-alpha; }   /* a.b.c. */
ol.upper-alpha   { list-style-type: upper-alpha; }   /* A.B.C. */
ol.lower-roman   { list-style-type: lower-roman; }   /* i.ii.iii. */
ol.upper-roman   { list-style-type: upper-roman; }   /* I.II.III. */
ol.cjk-ideographic { list-style-type: cjk-ideographic; } /* 一二三 */
ol.katakana      { list-style-type: katakana; }      /* ア.イ.ウ. */
ol.hiragana      { list-style-type: hiragana; }      /* あ.い.う. */

/* マーカー位置 */
ul.inside  { list-style-position: inside; }   /* 文字に重なる */
ul.outside { list-style-position: outside; }  /* 既定: 外側 */

/* 画像マーカー */
ul.custom {
  list-style-image: url('/img/bullet.png');
}

/* ショートハンド */
ul { list-style: square inside; }

counter-reset / counter-increment でカスタム番号

CSS カウンターを使うと、複雑な番号付け (1.1 / 1.2 / 1.2.1 のような節番号) も実現できます:

ol.toc {
  counter-reset: section;
  list-style: none;
}
ol.toc > li {
  counter-increment: section;
}
ol.toc > li::before {
  content: counter(section) ". ";
  font-weight: bold;
}

ol.toc ol {
  counter-reset: subsection;
  list-style: none;
}
ol.toc ol > li {
  counter-increment: subsection;
}
ol.toc ol > li::before {
  content: counter(section) "." counter(subsection) " ";
}

ネストしたリスト

<ul>
  <li>フロントエンド
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript
        <ul>
          <li>React</li>
          <li>Vue</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>バックエンド
    <ul>
      <li>PHP</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

ネストは <li> の中に <ul>/<ol> を入れます。<ul> の直接の子は <li> のみで、<li> と <li> の間に <ul> を置くと無効です。

ARIA role="list" の意味

Safari は list-style: none を当てた <ul> をリストとして読み上げないことがあります (アクセシビリティのバグ気味挙動)。これを補うため、デザインでリストを消す場合は明示的に role="list" を付けるテクニックがあります:

<ul role="list" style="list-style: none">
  <li role="listitem">項目1</li>
  <li role="listitem">項目2</li>
</ul>

CSS フレームワークでのリセット

Tailwind CSS・Bootstrap・Material UI 等は、デフォルトで ul/ol のスタイルをリセットしています。意図したリストには明示的に class="list-disc list-inside" (Tailwind) などを付ける必要があります。

<!-- Tailwind: 既定だとマーカー消える -->
<ul class="list-disc list-inside space-y-1">
  <li>項目1</li>
  <li>項目2</li>
</ul>

<!-- Bootstrap 5 -->
<ul class="list-unstyled">
  <li>マーカー無しリスト</li>
</ul>

SEO とアクセシビリティ

• ナビゲーションは <nav><ul>...</ul></nav> でマークアップ
• パンくずリストは <ol> + Schema.org BreadcrumbList
• スクリーンリーダーは「3 項目のリスト」のように個数を読み上げてくれる
• div を並べただけよりリスト要素を使った方が SEO に有利 (構造として認識される)

FAQ

Q: ul と ol、迷ったらどっち?
A: 順序を入れ替えても意味が変わらないなら ul、変わるなら ol。

Q: メニューバーは何で作る?
A: <nav><ul> の中に <li><a> を並べるのが定石です。横並びにするには CSS で display: flex を当てます。

Q: dl は table と何が違う?
A: dl は「用語と説明のペア」という意味で、表形式 (行と列で構造化された 2 次元データ) ではありません。スペックシートや 2 軸以上の比較には table を使います。