リストで使うタグ(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の順番に意味がある「順序リスト」を表します。

ランキングや手順が決まっている作業のリストを表示するときにはolの「順序リスト」でマークアップをします。

<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>

dlタグはHTML5.2からルールが変わっているため、詳しい使い方は別の記事でご紹介しています。

HTML5

2020.11.14

【HTML5】dlタグの新しい使い方

WEBサイト制作をしていると、会社概要や商品名と価格といった部分を作る際にかなりの頻度で使用をする<dl>タグ。実はこの<dl>タグ、2…

まとめ

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

おすすめ記事はこちら！