- HTML
HTMLリストの書き方｜ul・ol・dlの使い分けと入れ子、番号の開始指定
HTMLのリストは、順番に意味がなければ ul、順番に意味があれば ol、「項目名と説明」の組なら dl で書きます。 どれも見た目のためではなく、「これは一覧です」という意味をブラウザや読み上げソフトに伝えるための要素です。
この記事では、3つの使い分けを判断フローと早見表にまとめ、すべてのコードに表示結果を添えました。番号の開始や逆順の指定、入れ子の正しい位置、dl の中を div でまとめる書き方、CSSカウンターで「1-1」「第1条」形式の番号を作る方法まで、コピーして使える形で揃えています。表示結果は Chromium 141（Playwright 1.56.0）で実際に表示し、画面の画像とアクセシビリティツリー（読み上げソフトに渡される構造）の両方で確かめたものです。
ul・ol・dlの早見表
| 要素 | 意味 | 子に置く要素 | 既定の表示 | 使う場面の例 |
|---|---|---|---|---|
ul |
順序のないリスト | li |
先頭に「•」 | 持ち物、特徴の列挙、ナビゲーション |
ol |
順序のあるリスト | li |
先頭に「1.」「2.」 | 手順、ランキング、条文 |
dl |
説明リスト（名前と値の組） | dt と dd（div でまとめてもよい） |
dd が字下げされる |
用語集、プロフィール、仕様の一覧 |
ol と li で使える属性は次のとおりです。
| 属性 | 付ける要素 | 書き方 | 働き | 表示の例 |
|---|---|---|---|---|
start |
ol |
start="5" |
番号の開始値（整数） | 5. 6. 7. |
reversed |
ol |
reversed |
番号を逆順にする | 3. 2. 1. |
type |
ol |
type="A" |
番号の種類（1・a・A・i・I） | A. B. C. |
value |
li |
value="10" |
その項目の番号を指定。以降は続きから数える | 1. 10. 11. |
入れ子とCSSの要点です。
| やりたいこと | 書き方 |
|---|---|
| リストを入れ子にする | 子のリストを、親の li の中に入れる |
| dl の1組をまとめて装飾する | dt と dd を div で囲む |
| 「1-1」「1-2」形式の番号 | CSSカウンター（counter-reset・counter-increment・counter） |
| 「第1条」形式の番号 | ::before に「第」＋カウンター＋「条」を出す |
| 記号を消す | list-style: none（あわせて role="list" を検討） |
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「HTMLリストの書き方｜ul・ol・dlの使い分けと入れ子、番号の開始指定」
ul・ol・dlのどれを使うかの判断フロー
迷ったときは、次の順で考えます。
flowchart TD
A[一覧にしたい内容がある] --> B{項目名と説明の組になっている？}
B -- はい --> DL[dl を使う]
B -- いいえ --> C{順番を入れ替えると意味が変わる？}
C -- はい --> OL[ol を使う]
C -- いいえ --> UL[ul を使う]
「順番を入れ替えると意味が変わるか」が、ul と ol を分けるいちばん確かな基準です。
| 内容 | 入れ替えると | 選ぶ要素 |
|---|---|---|
| 買い物のメモ（りんご、みかん、牛乳） | 意味は変わらない | ul |
| 料理の手順（湯を沸かす → 麺を入れる） | 意味が変わる | ol |
| 人気順のランキング | 意味が変わる | ol |
| サイトのメニュー（ホーム、会社概要、お問い合わせ） | 意味は変わらない | ul |
| パンくずリスト（ホーム ＞ 記事 ＞ 現在のページ） | 意味が変わる | ol |
| 用語と説明 | 組になっている | dl |
| 商品の仕様（サイズ：幅30cm、重さ：2kg） | 組になっている | dl |
| よくある質問と回答 | 組になっている | dl |
見た目ではなく意味で選ぶのがコツです。番号を表示したいかどうか、記号を付けたいかどうかは、あとからCSSで自由に変えられます。
ulの書き方（順序のないリスト）
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
表示結果：
• りんご
• みかん
• ぶどう
ul の直接の子に置けるのは li だけです。li の中には、文章のほか、段落、リンク、画像、別のリストなどを入れられます。
olの書き方（順序のあるリスト）
<ol>
<li>湯を沸かす</li>
<li>麺を入れる</li>
<li>3分待つ</li>
</ol>
表示結果：
1. 湯を沸かす
2. 麺を入れる
3. 3分待つ
番号はブラウザが自動で振ります。途中に項目を足しても番号を書き直す必要がないのが、ol を使う利点です。
番号を途中から始める（start）
<ol start="5">
<li>材料を混ぜる</li>
<li>型に流す</li>
</ol>
表示結果：
5. 材料を混ぜる
6. 型に流す
リストの間に文章や図をはさんで、番号を続けたいときに使います。start の値は、番号の種類が何であっても整数で書きます。Chromium では 0 や負の数も番号として表示されました。
<ol start="0">
<li>準備</li>
<li>開始</li>
</ol>
<ol start="-1">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
表示結果：
0. 準備
1. 開始
-1. a
0. b
1. c
なお、html-validate 11.16.1 は start="-1" を「Attribute "start" has invalid value "-1"」と指摘しました（0 は指摘なし）。検査ツールを使っている場合は、負の数の開始値は避けておくと指摘が出ません。
番号を逆順にする（reversed）
<ol reversed>
<li>第3位の商品</li>
<li>第2位の商品</li>
<li>第1位の商品</li>
</ol>
表示結果：
3. 第3位の商品
2. 第2位の商品
1. 第1位の商品
reversed は値のいらない属性です。変わるのは番号だけで、項目の並び順はHTMLに書いたとおりです。start と組み合わせると、開始の番号を指定して数え下げます。
<ol reversed start="10">
<li>a</li>
<li>b</li>
</ol>
表示結果：
10. a
9. b
番号の種類を変える（type）
<ol type="A">
<li>a</li>
<li>b</li>
</ol>
<ol type="a">
<li>a</li>
<li>b</li>
</ol>
<ol type="I">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
<ol type="i">
<li>a</li>
<li>b</li>
</ol>
表示結果：
A. a
B. b
a. a
b. b
I. a
II. b
III. c
IV. d
i. a
ii. b
| type の値 | 種類 | 表示 |
|---|---|---|
1（既定） |
数字 | 1. 2. 3. |
a |
英小文字 | a. b. c. |
A |
英大文字 | A. B. C. |
i |
ローマ数字（小文字） | i. ii. iii. |
I |
ローマ数字（大文字） | I. II. III. |
type と start、reversed は組み合わせられます。英字のときも start は整数で書き、27 を指定すると「aa」から始まりました。
<ol type="a" start="27">
<li>a</li>
<li>b</li>
</ol>
<ol reversed type="A">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
表示結果：
aa. a
ab. b
C. a
B. b
A. c
type 属性と CSS の list-style-type は、どちらでも番号の種類を変えられます。使い分けの目安は次のとおりです。
| 場面 | 選ぶもの | 理由 |
|---|---|---|
| 本文から「手順Bを参照」のように番号で参照する | type 属性 |
番号が内容の一部なので、HTMLに書く |
| デザインとして種類を変えたいだけ | CSS の list-style-type | 見た目の指定はCSSにまとめる |
途中の番号を指定する（liのvalue）
<ol>
<li>a</li>
<li value="10">b</li>
<li>c</li>
</ol>
表示結果：
1. a
10. b
11. c
value を付けた項目がその番号になり、以降の項目は続きの番号になります。「欠番がある」「同率の順位がある」といった場合に使えます。value は ol の中の li で意味を持つ属性です。
olの属性の組み合わせ早見表
| 書き方 | 3項目のときの表示 |
|---|---|
ol |
1. 2. 3. |
ol start="5" |
5. 6. 7. |
ol reversed |
3. 2. 1. |
ol reversed start="10" |
10. 9. 8. |
ol type="A" |
A. B. C. |
ol reversed type="A" |
C. B. A. |
ol start="0" |
0. 1. 2. |
2番目の li に value="10" |
1. 10. 11. |
リストを入れ子にする（正しい位置とよくある誤り）
リストの中にリストを入れるときは、子のリストを、親の li の中に書きます。 閉じタグの位置がポイントです。
<ul>
<li>果物
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
</li>
<li>野菜</li>
</ul>
表示結果：
• 果物
◦ りんご
◦ みかん
• 野菜
「果物」の li は、子の ul を書き終えてから閉じています。2階層目の記号は、ブラウザの既定で白丸（◦）になりました。
よくある誤り：ulの直下にulを書く
次のように、li を閉じたあとに ul を並べる書き方をよく見かけます。
<!-- うまくいかない例：ul の直下に ul がある -->
<ul>
<li>果物</li>
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
<li>野菜</li>
</ul>
Chromium での見た目は、正しい書き方と同じになりました。ただし、HTMLの決まりでは ul の直接の子に置けるのは li だけです。html-validate 11.16.1 で検査すると、次のように指摘されます。
7:4 error <ul> element is not permitted as content under <ul> element-permitted-content
構造にも違いが出ます。アクセシビリティツリーを比べると、正しい書き方では子のリストが「果物」の項目の中に入りますが、この書き方では子のリストが「果物」と同じ階層に並びます。
| 書き方 | ツリー上の位置 | 意味 |
|---|---|---|
| 子のリストを li の中に書く | 「果物」の項目の中にリストがある | りんご・みかんは果物の下位項目 |
| ul の直下に ul を書く | 「果物」「（リスト）」「野菜」が同じ階層に並ぶ | 果物との親子関係が伝わらない |
見た目が同じでも、構造が違うという点が大切です。読み上げソフトや検索エンジンは構造を手がかりにするので、子のリストは li の中に入れます。
同じ検査で、次の書き方も指摘されました。
<!-- エラーになる例 -->
<ul>
<p>段落</p>
</ul>
<dl>
<dt>名前</dt>
<li>山田</li>
</dl>
13:4 error <p> element is not permitted as content under <ul> element-permitted-content
17:4 error <li> element is not permitted as content under <dl> element-permitted-content
17:4 error <li> element requires a <ul>, <ol>, <menu> or <template> element as parent element-permitted-parent
| うまくいかない書き方 | 直し方 |
|---|---|
ul の直下に ul や ol |
子のリストを、直前の li の中に移す |
ul の直下に p や div |
li の中に入れる |
dl の中に li |
dd に書き換える |
li を ul・ol の外に書く |
ul か ol で囲む |
字下げのためだけに ul や dl を使う |
CSS の margin や padding で字下げする |
olとulを組み合わせた入れ子
ol の中に ul、ol の中に ol も入れられます。入れ子の ol の番号は、それぞれ 1 から数え直されます。
<ol>
<li>準備
<ul>
<li>材料</li>
<li>道具</li>
</ul>
</li>
<li>調理
<ol>
<li>切る</li>
<li>焼く</li>
</ol>
</li>
</ol>
表示結果：
1. 準備
◦ 材料
◦ 道具
2. 調理
1. 切る
2. 焼く
li の中には段落も書けます。説明が長い手順では、p で段落を分けてから子のリストを続けると読みやすくなります。
<ol>
<li>
<p>段落</p>
<ul>
<li>子</li>
</ul>
</li>
<li>b</li>
</ol>
表示結果：
1. 段落
◦ 子
2. b
dlの書き方（説明リスト）
dl は、dt（項目名）と dd（その説明や値）の組を並べるリストです。
<dl>
<dt>HTML</dt>
<dd>文書の構造を書く言語</dd>
<dt>CSS</dt>
<dd>見た目を指定する言語</dd>
</dl>
表示結果：
HTML
文書の構造を書く言語
CSS
見た目を指定する言語
ブラウザの既定では、dd が字下げされて表示されます。記号や番号は付きません。
1つの項目名に複数の説明、複数の項目名に1つの説明
dt と dd は、1対1でなくてもかまいません。
<dl>
<dt>色</dt>
<dt>カラー</dt>
<dd>赤</dd>
<dd>青</dd>
</dl>
表示結果：
色
カラー
赤
青
| 組み合わせ | 書き方 | 使う場面 |
|---|---|---|
| 1対1 | dt 1つ ＋ dd 1つ | 用語と説明 |
| 1対多 | dt 1つ ＋ dd 複数 | 1つの語に複数の意味 |
| 多対1 | dt 複数 ＋ dd 1つ | 別名や同義語をまとめて説明 |
順番は「dt が先、dd が後」です。
dlの中をdivでまとめる書き方
dt と dd の1組を、div で囲んでまとめられます。MDN の dl 要素のページでも、許可されている内容として「1個以上の div 要素でまとめる方法」が挙げられていて、スタイルを設定しやすい点が利点として説明されています（今回ページを開いて確認）。
<dl>
<div>
<dt>名前</dt>
<dd>山田太郎</dd>
</div>
<div>
<dt>所属</dt>
<dd>開発部</dd>
</div>
</dl>
表示結果（CSSなし）：
名前
山田太郎
所属
開発部
div で囲んでも、アクセシビリティツリーでは div なしのときと同じく「説明リスト → 用語 → 説明」の構造のままでした。html-validate でも指摘は出ません。
div でまとめるときの決まりは次のとおりです。
| 決まり | 内容 |
|---|---|
| div の中身 | dt と dd の組を入れる |
| 混ぜない | div でまとめる組と、div なしの dt・dd を同じ dl の中で混ぜない（HTMLの決まりとして一般に知られた内容。html-validate では指摘されませんでした） |
| 使える要素 | まとめに使えるのは div だけ（section や span で囲むと、html-validate で「not permitted as content under dl」と指摘されました） |
コピペ用：dlを2列の表のように並べる
div でまとめておくと、CSS で「項目名：値」を横に並べるレイアウトが簡単に作れます。
<dl class="profile">
<div>
<dt>名前</dt>
<dd>山田太郎</dd>
</div>
<div>
<dt>所属</dt>
<dd>開発部</dd>
</div>
</dl>
.profile {
display: grid;
grid-template-columns: 8em 1fr;
gap: 4px 16px;
}
.profile > div {
display: contents;
}
.profile dt {
font-weight: bold;
}
.profile dd {
margin: 0;
}
表示結果：
名前 山田太郎
所属 開発部
Chromium で各要素の位置を調べたところ、dt と dd が同じ高さで横に並んでいることを確認できました（dt の左端が 8px、dd の左端が 136px、1行目の上端がどちらも 14px）。
dlと表（table）の使い分け
| 内容 | 選ぶ要素 |
|---|---|
| 「項目名：値」が縦に並ぶだけ（プロフィール、仕様） | dl |
| 行と列の両方に見出しがあり、縦にも横にも比べる | table |
| 用語集、よくある質問 | dl |
| 複数の商品を同じ項目で比較する | table |
CSSでリストの記号と番号を変える
list-style-typeで記号や番号の種類を変える
<ol class="kanji">
<li>a</li>
<li>b</li>
</ol>
<ol class="kana">
<li>a</li>
<li>b</li>
</ol>
<ol class="zero">
<li>a</li>
<li>b</li>
</ol>
<ul class="check">
<li>a</li>
<li>b</li>
</ul>
.kanji { list-style-type: cjk-ideographic; }
.kana { list-style-type: katakana; }
.zero { list-style-type: decimal-leading-zero; }
.check { list-style-type: "✓ "; }
表示結果：
一、a
二、b
ア、a
イ、b
01. a
02. b
✓ a
✓ b
| 値 | 表示 |
|---|---|
disc（ul の既定） |
• |
circle |
◦ |
square |
■ |
decimal（ol の既定） |
1. 2. 3. |
decimal-leading-zero |
01. 02. 03. |
lower-alpha・upper-alpha |
a. b. ／ A. B. |
lower-roman・upper-roman |
i. ii. ／ I. II. |
cjk-ideographic |
一、二、三、 |
katakana |
ア、イ、ウ、 |
文字列（"✓ " など） |
指定した文字 |
none |
表示しない |
（none を含め、表の値はすべて今回 Chromium 141 で表示を確認しました。）
::markerで番号の色や文字を変える
記号や番号の部分だけを装飾するには、::marker 疑似要素を使います。
<ol class="qa">
<li>a</li>
<li>b</li>
</ol>
.qa > li::marker {
content: "Q" counter(list-item) ". ";
color: #c00;
}
表示結果（番号の部分が赤色）：
Q1. a
Q2. b
counter(list-item) は、ブラウザがリストの番号用に持っているカウンターです。::marker の content に書くと、番号の前後に文字を足せます。
CSSカウンターで「1-1」「第1条」形式の番号を作る
ol の属性だけでは作れない番号は、CSSカウンターで作ります。使うプロパティは3つです。
| プロパティ・関数 | 働き |
|---|---|
counter-reset: 名前 |
カウンターを作って 0 にする（数値を付けるとその値にする） |
counter-increment: 名前 |
その要素が出てくるたびに 1 増やす |
counter(名前) |
現在の値を content に出す |
counters(名前, "区切り") |
入れ子の各階層の値を、区切り文字でつなげて出す |
「1-1」「1-2」形式（章と節）
<ol class="sec">
<li>はじめに
<ol>
<li>目的</li>
<li>対象</li>
</ol>
</li>
<li>手順
<ol>
<li>準備</li>
</ol>
</li>
</ol>
.sec {
counter-reset: sec;
list-style: none;
padding-left: 0;
}
.sec > li {
counter-increment: sec;
}
.sec > li::before {
content: counter(sec) ". ";
}
.sec ol {
counter-reset: sub;
list-style: none;
padding-left: 1.5em;
}
.sec ol > li {
counter-increment: sub;
}
.sec ol > li::before {
content: counter(sec) "-" counter(sub) " ";
}
表示結果：
1. はじめに
1-1 目的
1-2 対象
2. 手順
2-1 準備
親用（sec）と子用（sub）の2つのカウンターを用意し、子の番号には両方をつなげて出しています。子の ol に counter-reset を書いているので、章が変わるたびに節の番号が 1 に戻ります。
階層が何段でも対応する書き方（counters）
階層の深さが決まっていないときは、counters 関数を使うと1つのカウンター名で済みます。
<ol class="auto">
<li>章
<ol>
<li>節
<ol>
<li>項</li>
</ol>
</li>
<li>節</li>
</ol>
</li>
<li>章</li>
</ol>
.auto,
.auto ol {
counter-reset: item;
list-style: none;
padding-left: 1.2em;
}
.auto li {
counter-increment: item;
}
.auto li::before {
content: counters(item, "-") " ";
}
表示結果：
1 章
1-1 節
1-1-1 項
1-2 節
2 章
区切り文字を "." にすれば「1.1.1」形式になります。
「第1条」形式
<ol class="article">
<li>目的</li>
<li>定義</li>
<li>期間</li>
</ol>
.article {
counter-reset: art;
list-style: none;
padding-left: 0;
}
.article > li {
counter-increment: art;
}
.article > li::before {
content: "第" counter(art) "条 ";
font-weight: bold;
}
表示結果（「第1条」の部分が太字）：
第1条 目的
第2条 定義
第3条 期間
content の中で、文字列とカウンターを空白で区切って並べるだけです。「手順1：」「STEP 1」「Q1.」なども同じ形で作れます。
CSSカウンターの番号を途中から始める
counter-reset に数値を付けると、開始の値を変えられます。最初の項目で 1 増えるので、始めたい番号より 1 小さい値を書きます。
<ol class="step">
<li>a</li>
<li>b</li>
</ol>
.step {
list-style: none;
padding-left: 0;
counter-reset: step 4;
}
.step > li {
counter-increment: step;
}
.step > li::before {
content: "手順" counter(step) "：";
}
表示結果：
手順5：a
手順6：b
olの属性とCSSカウンターの使い分け
| 作りたい番号 | 方法 |
|---|---|
| 5 から始める、逆順、A・B・C | ol の start・reversed・type |
| 途中の番号を飛ばす | li の value |
| 漢数字、カタカナ、01 形式 | CSS の list-style-type |
| 番号に色を付ける、前後に文字を足す | ::marker |
| 「1-1」「1.1.1」 | CSSカウンター（counter・counters） |
| 「第1条」「手順1：」 | CSSカウンター、または ::marker の content |
なお、CSSカウンターで作った番号は ::before の中身として表示されるため、ol の start や li の value とは別に数えられます。番号を途中から始めたいときは、上の counter-reset の方法を使います。
リストを横並びにする・余白を調整する（コピペ用）
メニューやパンくずリストは、リストで書いてからCSSで横に並べるのが定番です。
ナビゲーションを横並びにする
<nav aria-label="メイン">
<ul class="menu">
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
.menu {
display: flex;
gap: 24px;
list-style: none;
margin: 0;
padding-left: 0;
}
表示結果：
ホーム 会社概要 お問い合わせ
Chromium で各項目の位置を調べ、3つの項目が同じ高さで左から順に並ぶことを確認しました。アクセシビリティツリーでは「navigation → list → listitem → link」の構造が保たれています。
パンくずリストをolで書く
パンくずリストは「上の階層から現在のページへ」という順番に意味があるので、ol で書きます。区切りの記号は、CSS の ::before で項目の間に出します。
<nav aria-label="パンくずリスト">
<ol class="crumbs">
<li><a href="/">ホーム</a></li>
<li><a href="/blog">記事一覧</a></li>
<li aria-current="page">HTMLリストの書き方</li>
</ol>
</nav>
.crumbs {
display: flex;
gap: 8px;
list-style: none;
margin: 0;
padding-left: 0;
}
.crumbs > li + li::before {
content: ">";
margin-right: 8px;
}
表示結果：
ホーム > 記事一覧 > HTMLリストの書き方
li + li は「前に li がある li」という意味のセレクターで、2番目以降の項目の前にだけ区切りを出しています。
字下げと項目の間隔を調整する
リストの左の字下げは、ブラウザの既定では ul・ol の padding-left（Chromium では 40px）で付いています。
<ul class="tight">
<li>項目A</li>
<li>項目B</li>
</ul>
.tight {
padding-left: 1.2em;
}
.tight > li + li {
margin-top: 8px;
}
| 調整したいところ | 指定するプロパティ |
|---|---|
| リスト全体の左の字下げ | ul・ol の padding-left |
| 項目どうしの間隔 | li の margin-top（または ul を flex・grid にして gap） |
| 記号と文字の間 | li の padding-left |
| リストの上下の余白 | ul・ol の margin |
| dd の字下げ | dd の margin-left（Chromium の既定は 40px） |
list-style:noneでリストとして読み上げられなくなる問題への対処
ナビゲーションやカードの一覧では、list-style: none で記号を消すことがよくあります。このとき、ブラウザによってはリストとして扱われなくなる点に気をつけます。
MDN の list-style のページ（今回開いて確認）には、次の内容が書かれています。
- Safari では、list-style: none を設定した ol・ul は、nav 要素の中にある場合を除いて、アクセシビリティツリーでリストとして認識されない。これは意図された動作である。
- リストとして確実に伝えるには、ol・ul に role="list" を設定する。
- 別の方法として、各項目の ::before に空ではない内容（文字や画像）を入れると、リストの意味が戻る。空文字や空白だけの content は対象にならない。
リストとして認識されると、読み上げソフトは「リスト、3項目」のように件数を伝えたり、項目から項目へ移動したりできます。この手がかりを保つための対処が次のコードです。
<ul class="plain" role="list">
<li>ホーム</li>
<li>会社概要</li>
<li>お問い合わせ</li>
</ul>
.plain {
list-style: none;
padding-left: 0;
}
表示結果：
ホーム
会社概要
お問い合わせ
| 状況 | 対処 |
|---|---|
| nav の中のメニュー | そのままでよい（MDN の記載では nav の中は対象外） |
| nav の外で記号を消したリスト | role="list" を付ける |
| role を書きにくい場合 | ::before に文字や画像の記号を入れる |
| 記号を別の文字にしたいだけ | list-style-type: "✓ " のように文字列を指定する |
今回の確認範囲も書いておきます。
| 確認したこと | 結果 |
|---|---|
| Chromium 141 で list-style: none の ul をアクセシビリティツリーで確認 | role なしでも「list」「listitem」のまま（記号だけがなくなる） |
| 同じく role="list" を付けた ul | 「list」「listitem」のまま |
| Safari と VoiceOver での読み上げ | 未実行（MDN の記載にもとづく） |
なお、html-validate は ul に付けた role="list" を「Redundant role "list" on ul」（もともと持っている役割と同じ、という意味）と指摘しました。意図して付けている場合は、検査ツールの no-redundant-role ルールをその箇所だけ対象から外します。
Chromium ではリストのまま扱われましたが、Safari では扱いが異なると説明されているため、記号を消したリストには role="list" を添えておくと、どのブラウザでも同じ構造を伝えられます。
コピペ用のひな形まとめ
よく使う形を1か所にまとめます。
<!-- 順序のないリスト -->
<ul>
<li>項目</li>
<li>項目</li>
</ul>
<!-- 順序のあるリスト（5 から開始） -->
<ol start="5">
<li>項目</li>
<li>項目</li>
</ol>
<!-- 逆順のリスト -->
<ol reversed>
<li>項目</li>
<li>項目</li>
</ol>
<!-- 入れ子（子のリストは li の中） -->
<ul>
<li>親の項目
<ul>
<li>子の項目</li>
</ul>
</li>
</ul>
<!-- 説明リスト（div でまとめる） -->
<dl>
<div>
<dt>項目名</dt>
<dd>説明</dd>
</div>
</dl>
<!-- 記号を消したリスト -->
<ul role="list" style="list-style: none; padding-left: 0;">
<li>項目</li>
</ul>
書き終えたら、次の点を確かめます。
| チェック項目 | 確認の方法 |
|---|---|
| ul・ol の直接の子が li だけになっている | html-validate などの検査ツール |
| 子のリストが li の中に入っている | 閉じタグの位置を見る |
| 順番に意味がある一覧を ol にした | 入れ替えて意味が変わるかを考える |
| 字下げのためだけにリストを使っていない | CSS の margin・padding に置き換える |
| dl の中で、div ありと div なしを混ぜていない | dl の直接の子を見る |
| 記号を消したリストに role="list" を付けた | nav の外にあるリストを確認 |
よくある質問
Q. ulとolは、見た目をCSSで変えられるならどちらでも同じですか？ A. 見た目は同じにできますが、伝わる意味が違います。ol は「順番に意味がある」ことを示すので、手順やランキングは ol、順番を入れ替えても困らない一覧は ul にします。
Q. 2つに分かれたolの番号を続けるにはどうしますか？
A. 2つ目の ol に start 属性を付けます。1つ目が 2 項目なら start="3" と書くと、3 から始まります（今回、間に別のリストをはさんで 3. 4. と続くことを確認）。項目数が変わったときは、start の値も合わせて直します。
Q. liの中に見出しや段落を入れてもよいですか？ A. 入れられます。li の中には、段落、見出し、画像、リンク、別のリストなどを書けます。今回、p と入れ子の ul を li の中に書いた例で、html-validate の指摘が出ないことを確認しました。
Q. dlはよくある質問（Q&A）に使えますか？ A. 使えます。質問を dt、回答を dd にすると、「項目名と説明の組」という dl の意味に合います。開閉できる形にしたい場合は、details 要素と summary 要素を使う方法もあります。
まとめ
- 順番に意味がなければ ul、あれば ol、項目名と説明の組なら dl を使います。見た目ではなく意味で選びます。
- ol の番号は属性で変えられます。 start で開始値、reversed で逆順、type で種類、li の value で途中の番号を指定します。
- 入れ子にするときは、子のリストを親の li の中に書きます。 ul の直下に ul を書くと、見た目は同じでも構造が変わります。
- dl の dt と dd は、div で1組ずつまとめられます。 グリッドで横に並べるレイアウトが作りやすくなります。
- 「1-1」「第1条」形式は CSSカウンター（counter-reset・counter-increment・counter・counters）で作ります。
- list-style: none で記号を消したリストには role="list" を添えると、ブラウザによらずリストとして伝わります。
- すべての例は Chromium 141 で表示を確認しました。Safari と読み上げソフトでの確認は未実行です。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「HTMLリストの書き方｜ul・ol・dlの使い分けと入れ子、番号の開始指定」
株式会社RJCでは、HTMLのリストをはじめとするマークアップの書き方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか？
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください！
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ！
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨（休暇 or 金一封）、11期連続の黒字決算。
