CSS HTML5

2021.01.06

リストで使うタグ(ul・ol・dl)の違いとは?

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

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

基本的にはolliulliのどちらかのセットでリストを作っていきます。
liはそれぞれのリストの中身を意味しており、olもしくはulliを囲むことでリストを示すことになります。

<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は順番が関係しないリストに使用

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

持ち物リストや、スライドショーなど、どの順番でも問題がないリストは「順不同のリスト」でマークアップをします。

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

入れ子も可能

olul)の中に更にolul)を入れることも可能です。
ただし、olul)の直下に直接置くことはできないので、必ず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>

リストのマーカーの種類

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

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

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

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

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

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

会社概要のリストや商品名+説明文などをマークアップするときに向いています。

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

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

まとめ

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

おすすめ記事はこちら!

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

おすすめ記事

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!