HTMLで箇条書きを作るときは、ul・ol・li の3つのタグを組み合わせます。この記事では、書き方と使い分け、間違えやすいところ、WordPressでの作り方をまとめます。
3つのタグの役割
箇条書きは、全体を囲むタグ（ul か ol）の中に、項目ごとの li を並べる形で書きます。
| タグ | 名前の由来 | 役割 |
|---|---|---|
ul | unordered list | 順番のない箇条書き（頭に「・」が付く） |
ol | ordered list | 順番のある箇条書き（頭に 1. 2. 3. が付く） |
li | list item | 箇条書きの1つひとつの項目 |
順番のない箇条書き：ul
並べる順番に意味がないときに使います。
<ul>
<li>プログラミングの学習</li>
<li>ブログ記事の執筆</li>
<li>愛犬の散歩</li>
</ul>
順番のある箇条書き：ol
料理の手順や設定の手順など、順番が大事なときに使います。番号はブラウザが自動で付けるので、「1.」「2.」を自分で書く必要はありません。途中に項目を足しても、番号は自動で振り直されます。
<ol>
<li>パソコンを開く</li>
<li>エディタ（VSCodeなど）を起動する</li>
<li>HTMLコードを書き始める</li>
</ol>
番号の付け方を変える属性
ol には、番号の付け方を変える属性があります。
| 属性 | 意味 | 例 |
|---|---|---|
start | 何番から始めるか | start="4" で 4. 5. 6. と続く |
reversed | 番号を逆順にする | ランキングの 3. 2. 1. など |
type | 番号の種類 | type="a" で a. b. c.、type="i" で i. ii. iii. |
手順の途中に説明の文章を挟んで、番号を続きから始めたいときに start が便利です。
間違えやすいところ
① ulやolのすぐ下には、liしか書けない
ul や ol のすぐ内側に置けるのは、li だけです（例外は script と template のみ）。文章をそのまま書いたり、p や div を挟んだりするのは、HTMLとして正しくありません。
よくない例：
<ul> 💡 ここに直接メモを書いてはダメ！ <li>項目1</li> </ul>
よい例（メモも li の中に書く）：
<ul>
<li>💡 項目1（ここにメモを書くならOK）</li>
</ul>
よくない例でも、ブラウザは文字をそのまま表示してくれます。ただ、その文字は「箇条書きの項目」としては扱われないので、画面読み上げソフトでは項目の数に入らず、CSSで li に当てたデザインも効きません。箇条書きの上に説明を入れたいときは、ul の外（前）に p で書きます。
② 入れ子にするときは、liの中に箇条書きを丸ごと入れる
大きな項目の中に小さな項目を並べたいときは、親の li の中に、新しい ul や ol を丸ごと入れます。
<ul>
<li>Webデザインの勉強
<ul>
<li>HTMLの基本（いまココ）</li>
<li>CSSの装飾</li>
</ul>
</li>
<li>プログラミングの勉強</li>
</ul>
子の ul は、「Webデザインの勉強」の li の閉じタグ </li> より前に入れます。</li> のあとに置くと、①と同じように ul のすぐ下に li 以外のものを置いたことになります。
WordPressで入れ子の箇条書きを作ると、テーマによっては行間が不自然に空くことがあります。CSSで詰めた方法は「ネストしたリスト（箇条書き）の不自然な行間をCSSで詰める方法」で紹介しています。
用語と説明の組なら dl
「用語」と「その説明」の組を並べるときは、dl（description list）という別のリストも使えます。
<dl>
<dt>ul</dt>
<dd>順番のない箇条書き</dd>
<dt>ol</dt>
<dd>順番のある箇条書き</dd>
</dl>dt が用語、dd がその説明です。
WordPressでは
WordPressのブロックエディタでは、「リスト」ブロックが ul と li になります。
- 番号付きにする：
ツールバーの「番号付きリスト」に切り替えるとolになる - 入れ子にする：
項目の先頭で Tab キーを押すか、ツールバーの「インデント」を使うと、一つ上の項目の中に入る - 開始番号や逆順：
番号付きリストの右側の設定で、開始番号や逆順を指定できる
何項目にするかに決まりはありませんが、私はブログの箇条書きは3〜5項目くらいを目安にしています。それより多くなるときは、見出しで分けたり、表にしたりしたほうが読みやすいことが多いです。
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- 順番に意味がなければ
ul、手順のように順番が大事ならol。項目はli ulやolのすぐ下にはliしか書かない。説明は箇条書きの外にpで- 入れ子は、親の
liの閉じタグの前に子のリストを入れる olはstart・reversed・typeで番号の付け方を変えられる- 用語と説明の組なら
dl
コメント