リストを作るulタグ,olタグ,dlタグの違いと使い分け

きなこ

リストを作りたいんだけどどうやって作るの？

こばゆた

Webページでリストを作るときに使うのが「リストタグ」だよ。
HTMLには目的に応じて3種類のリストタグ（ul、ol、dl）があり、それぞれ役割があるんだよ。
では今回は、それらの違いと使い方を初心者の方向けにわかりやすく解説します！

1.HTMLにおけるリストタグとは？

1-1.なぜリストが必要なのか？

リストは、複数の項目をわかりやすく整理して表示するのに便利です。
例えば「買い物リスト」「手順」「用語集」など、情報をグループ化する際に使用されます。

またリストタグを正しく使うことで、見た目が整うだけでなく、意味構造が明確になり、検索エンジンがページの構造を正しく理解するのに役立ち、アクセシビリティにも好影響を与えます。

1-2.リストタグの種類一覧

こばゆた

リストを作るには下の表のように専用のタグが用意されています

2.ulタグ（順不同リスト）

2-1.ulタグとは

ulタグは”unordered list” の略で順序のないリストという意味で箇条書きに使われます。

<ul>
  <li>ラーメン</li>
  <li>そば</li>
  <li>うどん</li>
  <li>冷麦</li>
</ul>

こばゆた

「食べたい麺類」は特に順序に関係がないですよね。

またリストタグの中にある<li>タグは”list item“の略で、
リストタグと合わせて使われるタグです。

2-2.ulタグでのリストの作り方

この様に要素を要素で囲むことを入れ子構造といい、囲む方の要素を親要素(ここではulタグ)、囲まれる要素を子要素(ここではliタグ)といいます。

この入れ子構造はレイアウトの際にも必要となる考え方なのでしっかり理解しておきましょう。

3.olタグ（順序付きリスト）

3-1.olタグとは

“ordered list” の略で順序のついたリストという意味で、順序のある箇条書きに使われます。

こばゆた

こちらは順序が大事になるリストです

作り方は先ほどのulタグと同じ考え方でOKです。

3-2.olタグでのリストの作り方

大事なのはulとolはliと合わせて使うということです。

4.dlタグ（説明リスト）

4-1.dlタグとは

“description list”の略で説明リストという意味で用語と説明のペアを作るリストです。

dtとddのセットで定義リストとして使われます。ちなみにdtは”definition term”で質問の様に、ddは”definition description”の略で答えの様に使います。

<dl>
  <dt>質問１</dt>
  <dd>回答１</dd>
  <dt>質問２</dt>
  <dd>回答２</dd>
</dl>

ddの方が自動的に字下げされて、質問とその回答や説明のような形のリストになります。

この様にdlタグはFAQや用語解説などに使うと効果的です。

4-2.dlタグでのリストの作り方

5.タグの使い分けと注意点

5-1.タグの意味を考える

たとえば、手順をulで記述すると意味が曖昧になります。正確に伝えるためには、適切なタグを選ぶことが大切です。

<ol>
  <li>登録する</li>
  <li>確認メールを開く</li>
  <li>ログインする</li>
</ol>

<ul>
  <li>登録する</li>
  <li>確認メールを開く</li>
  <li>ログインする</li>
</ul>

上記では順序が大切なので、olが正解です

6.リストタグの応用

こばゆた

応用もまとめました。余裕がある方はどうぞ！

6-1.リストの先頭の点について

先頭につく・はCSSで消したり、変更することもできます。

またolタグにつく数字も数字以外にもカタカナ、アルファベット、漢数字なども設定できます。

こちらの記事でも詳しく書いてありますのでどうぞ！

【list-style】リストに付く点の変更や削除【CSS】

list-styleプロパティを使うことでリストに付いた点を変えたりや削除したりが出来ます。今回はそんなlist-styleプロパティについてわかりやすく解説しております。

kbyt-programming.com

2021年12月02日

6-2.リストタグの応用でできること

今まで学習したものを組み合わせれば以下の様にリストの中にリストを入れることもでき、ulとolも組み合わせて使うこともできます。

<p>今日のやることリスト</p>
<ol>
  <li>買い物</li>
    <ul>
      <li>小麦粉</li>
      <li>卵</li>
      <li>豚肉</li>
      <li>キャベツ</li>
    </ul>
  <li>洗濯</li>
  <li>掃除</li>
</ol>

こばゆた

あんまり複雑にすると混乱してしまうので注意です

チャッピー

ちょっと混乱してきたぞ…

こばゆた

さらに応用して、装飾のためのCSSというものを勉強すればWeb サイトでよく見るメニューのようなものも作ることができます。

See the Pen XWmBwEz by kbyt (@kbo58) on CodePen.

7.まとめ

<ul>
  <li>リストにしたいもの</li>
  <li>リストにしたいもの</li>
  <li>リストにしたいもの</li>
  <li>リストにしたいもの</li> 
</ul>

<ol>
  <li>リストにしたいもの</li>
  <li>リストにしたいもの</li>
  <li>リストにしたいもの</li>
  <li>リストにしたいもの</li> 
</ol>

<dl>
  <dt>質問</dt>
  <dd>回答</dd>
  <dt>質問</dt>
  <dd>回答</dd>
</dl>

こばゆた

今回は少しややこしいところがありました

チャッピー

入れ子構造だね

こばゆた

これから先も入れ子構造は頻繁に出てくるから避けては通れないよ(笑)

まずは簡単な例を自分で作って理解するのが大事です

チャッピー

何事も基本が大事だね

頑張ろう💦