【HTML】「ul」,「ol」,「li」タグの使い方

2020年11月7日 2024年4月1日

こんにちは！Kです！

今回はHTMLのul、ol、liタグを使って箇条書きのリストを作る方法を紹介します。

このタグもよく使われるタグなのでぜひ使いこなせるよう覚えましょう！

ul、ol、liタグの使い方

３つのタグがありますが、以下の使い方が基本です。

1.それぞれのリストの項目を囲む「<li>」
2.<li>の項目全体を囲む「<ul>」もしくは、「<ol>」

【例1：ulの場合】

◎<ul>で囲む場合
　ulは、Unordered Listの略です。
　ulとliを使うことで、各項目の先頭が黒ポチの箇条書きになります。
　黒ポチはcssで消すことも可能です。

<ul>
  <li>リスト01</li>
  <li>リスト02</li>
  <li>リスト03</li>
</ul>

ブラウザでの表示結果

・ リスト01
・ リスト02
・ リスト03

【例2：olの場合】

◎<ol>で囲む場合
　olは、Ordered Listの略です。
　olを使用すると番号付きの箇条書きになります。
　数字は連番で、liの数が増えれば番号も増えていきます。

<ol>
  <li>リスト01</li>
  <li>リスト02</li>
  <li>リスト03</li>
</ol>

ブラウザでの表示結果

1. リスト０１
2. リスト０2
3. リスト０3

ul、ol、liタグを使う際の注意点

<ul>、<ol>を使う場合、その直下の子要素は<li>だけしか使えません。

これはルールですので覚えておいてください。

あくまでul、ol直下なので、そこは勘違いしないようにしてください。

分かりづらいと思うので例を出しておきます。

<!-- ulタグの直下に<p>があるためNG -->
<ul>
  <p>・・・</p>
  <li>リスト01</li>
  <li>リスト02</li>
</ul>

<!-- ulタグの直下でなく、liタグの中なのでOK -->
<ul>
  <li>リスト01</li>
  <li>リスト02</li>
  <li>リスト03<p>・・・</p></li>
</ul>