【初心者向け】リストを作るulタグ,olタグ,dlタグの違いと使い分け【HTML】

きなこ

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

こばゆた

リストを作るには専用のタグが用意されているんだ

リストを作ること自体はそんなに難しくないけど、後から出てくる入れ子構造が少しややこしいんだよね

チャッピー

入れ子構造ってリンクのところで出てきたやつ？

こばゆた

そうそう

入れ子はどことどこがセットになっているかを意識しないとうまく動かなかったり、レイアウトが崩れてしまうから注意しないといけないよ

こばゆた

最初は単なる箇条書きのリストから作り、いずれやるCSSを勉強すればよくありがちなメニューのようなものも作ることができます。

さらに先ほど出てきた入れ子やCSSを応用するともっと複雑なメニューもつくる事ができます。

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

チャッピー

何事も基本が大事だね

頑張ろう💦

今回の内容

1.ulタグ
- 1-1.ulタグ
- 1-2.ulタグの作り方
2.olタグ
- 2-1.olタグ
- 2-2.olタグの作り方
3.dlタグ
- 3-1.dlタグ
- 3-2.dlタグの作り方
4.まとめ

1.ulタグ

1-1.ulタグ

“Unordered List” の略で順序のないリストという意味で箇条書きに使われます。

食べたい麺類

ラーメン
そば
うどん
冷麦

こばゆた

順序が入れ替わっても影響のないリストです

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

こちらの記事でも詳しく書いてあります。

1-2.ulタグの作り方

ulタグの作り方

STEP1
ulタグを書く
```
<ul></ul>
```
STEP2
liタグを書く
ulタグの中にリストの数だけliタグを作成します。
```
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

STEP3

liタグ内にテキストを書く

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

ラーメン
そば
うどん
冷麦

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

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

2.olタグ

2-1.olタグ

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

朝起きる
散歩する
昼寝する
ご飯食べる

こちらもCSSで数字以外にもカタカナ、アルファベット、漢数字なども設定できます。

こばゆた

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

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

2-2.olタグの作り方

olタグの作り方

STEP1
olタグを書く
olタグの中にリストの数だけliタグを作成します。
```
<ol></ol>
```

STEP2

liタグを書く

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

STEP3

liタグ内にテキストを書く

<ol>
  <li>朝起きる</li>
  <li>散歩する</li>
  <li>昼寝する</li>
  <li>ご飯食べる</li>
</ol>

朝起きる
散歩する
昼寝する
ご飯食べる

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

またリストの中にリストを入れることもでき、ulとolも組み合わせて使うこともできます。

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

今日のやることリスト

買い物

小麦粉
卵
豚肉
キャベツ

洗濯
掃除

こばゆた

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

チャッピー

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

3.dlタグ

3-1.dlタグ

“Description List”の略で説明リストという意味になります。

dtとddのセットで定義リストとして使われます。ちなみにdtは”Description Term”で質問のように、ddは”Description Detail”の略で答えのように使います。

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

質問１: 回答１
質問２: 回答２

3-2.dlタグの作り方

dlタグの作り方

STEP1
dlタグを書く
```
<dl></dl>
```
STEP2
dlタグの中に説明リストにしたいものをdtタグとddタグで囲む
```
<dl>
  <dt>質問</dt>
  <dd>回答</dd>
  <dt>質問</dt>
  <dd>回答</dd>
</dl>
```

質問: 回答
質問: 回答

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

4.まとめ

リストまとめ

ulタグは順番が大事ではない箇条書きリストを作る

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

olタグは順番が大事な箇条書きリストを作る

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

ulタグ、olタグはliタグと合わせて使う。両方を組み合わせて使っても良い

dlタグはdtとddのセットで定義リストを作る

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

こばゆた

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

チャッピー

入れ子構造だね

きなこ

これからも出るということは大事ってことね

こばゆた

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

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