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

2020年06月26日
きなこ
きなこ

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

こばゆた
こばゆた

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

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

チャッピー
チャッピー

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

こばゆた
こばゆた

そうそう

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

こばゆた
こばゆた

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

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

ナビメニューの例

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

チャッピー
チャッピー

何事も基本が大事だね

頑張ろう💦

スポンサーリンク

1.ulタグ

1-1.ulタグ

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

食べたい麺類

  • ラーメン
  • そば
  • うどん
  • 冷麦
こばゆた
こばゆた

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

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

リストの前のスタイルの違い

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

【list-style】リストに付く点の変更や削除【CSS】
list-styleプロパティを使うことでリストに付いた点を変えたりや削除したりが出来ます。今回はそんなlist-styleプロパティについてわかりやすく解説しております。
kbyt-programming.com
2021年12月02日

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” の略で順序のついたリストという意味で、順序のある箇条書きに使われます。

  1. 朝起きる
  2. 散歩する
  3. 昼寝する
  4. ご飯食べる
olタグの使用例

こちらも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>

  1. 朝起きる
  2. 散歩する
  3. 昼寝する
  4. ご飯食べる

大事なのは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>

今日のやることリスト

  1. 買い物
    • 小麦粉
    • 卵
    • 豚肉
    • キャベツ
  2. 洗濯
  3. 掃除
こばゆた
こばゆた

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

チャッピー
チャッピー

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

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>
こばゆた
こばゆた

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

チャッピー
チャッピー

入れ子構造だね

きなこ
きなこ

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

こばゆた
こばゆた

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

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

スポンサーリンク

広告

コメント