箇条書きと番号付きリストはどう違う？ul・ol・liを試そう

「ノート、筆記用具、飲み物」という持ち物と、「開く、入力する、保存する」という手順。どちらも項目が並ぶけれど、順番の大切さが違うよね。HTMLでは、順番を表すリストと、順番を前提にしないリストを分けて書けるよ。

目標は、ul・ol・liの役割を見分けること。HTMLの準備がなくても、ブラウザで下の作例を切り替えられる。

順番を問わない項目にはul

<ul>
  <li>ノート</li>
  <li>筆記用具</li>
  <li>飲み物</li>
</ul>

ulは、項目の順序そのものが意味の中心ではないリスト。liは、その中の一つの項目を表す。上の例なら、飲み物を先に書いても「何を持ってくるか」という意味は大きく変わらないね。

ブラウザでは通常、行頭に丸などの印が付く。ただし、印の形はCSSで変えられるので、丸が見えるかどうかだけでHTMLの種類を判断しないでね。

順番を表す手順にはol

<ol>
  <li>ファイルを開く</li>
  <li>内容を入力する</li>
  <li>保存する</li>
</ol>

olは、順序が意味を持つリスト。通常は番号が表示される。上の手順を「保存する、開く、入力する」の順に変えると、同じ作業の説明としては困ってしまうよね。

olでも、個々の項目はliで書く。数字を本文へ直接入力しなくても、リストとしてまとめるとブラウザが番号を付ける。番号の開始値を変える機能もあるけれど、まずは基本の1から始めよう。

作例でリストの種類を切り替えよう

1. 最初は「持ち物」がulで表示されている。三つの項目と、要素名を確認する。
2. 「手順に切り替える」を押す。内容が三つの操作になり、olへ変わる。
3. 要素名がol、項目数が3と表示されることを確認する。
4. 「持ち物に戻す」でulへ戻す。

編集部では、切り替え後の親要素がulまたはolになること、直接の子が三つのliになることをChromiumで確認した。「最初から試す」でも持ち物の表示へ戻せるよ。

点や数字を文章へ打つだけとは違う

段落の先頭へ「・」や「1.」を打つと、見た目は似せられる。でも、HTML上でリストとしてまとまるわけではない。項目のまとまりを伝えたいなら、対応する要素を使おう。

CSSで番号を見えなくしたolも、構造は順序付きリストのまま。反対に、ulへ数字のような印を付けても、順序を表すolへ変わるわけではないよ。見た目と意味を合わせて選びたいね。

項目の中へ補足を入れるとき

一つのliに、項目名と短い説明をまとめられる。さらに小さなリストを入れる場合は、親のliの内側へ置いて、その項目の補足だと分かる形にしよう。最初から深い入れ子にせず、一つのリストで読めないかも考えてみてね。

閉じタグや配置に迷ったら、上の三項目の例へ戻し、一つずつ内容を置き換えよう。文章全体の構造は、太字と見出しの違いでも確認できるよ。