【HTML】リスト用タグ(ul・ol・dl)の使い分け

今回はHTMLでリストを作る方法をご紹介します。
リストを表すタグは複数あるので、内容によってしっかり使い分けることで文書構造に沿った綺麗なサイトに近づきます。

1.「ol」・「ul」・「li」で作るリスト

基本的にはolとli、ulとliのどちらかのセットでリストを作っていきます。
liはそれぞれのリストの中身です。
olもしくはulでliを囲みます。

<ol>
 <li>1つ目の中身</li>
 <li>2つ目の中身</li>
 <li>3つ目の中身</li>
</ol>

olは順番に意味があるリストに使用

ol要素はliの順番に意味がある「順序リスト」を表します。

ランキングや手順が決まっている作業のリストを表示するのに向いています。

<p>好きなおでんの具ランキング</p>
<ol>
 <li>大根</li>
 <li>たまご</li>
 <li>もち巾着</li>
 <li>牛すじ</li>
 <li>こんにゃく</li>
</ol>

<p>おでんの作り方</p>
<ol>
 <li>鍋で出汁をとる</li>
 <li>下処理した大根を入れる</li>
 <li>ゆでた卵、こんにゃく、牛すじを入れる</li>
 <li>もち巾着を入れる</li>
 <li>火を止める直前にはんぺんを入れる</li>
</ol>

ulは順番が関係しないリストに使用

ulはliの順番は関係しない「順不同のリスト」を表します。

持ち物リストや、スライドショーの表示に向いています。

<p>おでんの具材の買い出しリスト</p>
<ul>
 <li>卵</li>
 <li>大根</li>
 <li>こんにゃく</li>
 <li>ちくわ</li>
 <li>はんぺん</li>
</ul>

入れ子も可能

ol（ul）の中に更にol（ul）を入れることも可能です。
ただし、ol（ul）の直下に置くことはできないので、必ずliの中に使用します。

<p>おでんの具材の下処理方法</p>
<ul>
 <li>大根
  <ol>
   <li>皮を厚めにむく</li>
   <li>切り口を包丁でそいで面取りする<li>
   <li>隠し包丁を入れる<li>
   <li>下茹でをする<li>
  </ol>
 </li>
 <li>こんにゃく
  <ol>
   <li>適当な大きさにカットする</li>
   <li>両面に網目模様の切込みを入れる</li>
   <li>塩を少し刷り込み、5分置く</li>
   <li>塩を流して下茹でする</li>
  </ol>
 </li>
</ul>

リストのマーカーの種類

ol、ulは各リストの前にマーカーを付けることができます。
htmlのol（ul）タグにtype属性を追加する、もしくはcssのlist-style-typeで指定する2パターンがあります。

今回はcssでの指定方法を紹介します。

See the Pen list-style-type by spiqa design (@spiqa_design) on CodePen.

ol（ul）タグにlist-style-type:〇〇;を設定します。
一部ブラウザでは対応していないものもあるので注意してください。
例には挙げきれませんでしたが、ヘブライ数字、アルメニア数字、グルジア数字などを指定することもできます。

2.「dl」・「dt」・「dd」で作るリスト

dlを使ったリストはol・ulとは違い、定義リストを表します。
とある語句と、それに対する説明文がセットになっています。

会社概要のリストや商品名＋説明文などに向いています。

<p>おでんの具材の好きな理由</p>
<dl>
 <dt>大根</dt>
 <dd>数少ない野菜だから</dd>
 <dt>たまご</dt>
 <dd>味がしみ込んでいておいしい</dd>
</dl>

まとめ

ol、ul、dlタグを正しく使うことで綺麗なマークアップができるようになります。
また、今回ご紹介しきれませんでしたがlist-style-typeを非表示にして疑似要素の::beforeタグを使うことでオリジナルのマーカーを付けることもできます。
ぜひそれぞれの特性を理解して使い分けてみてください！