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

こんにちは!CodeClub965で講師をしているKです!

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

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

ul、ol、liタグの使い方

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

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. リスト01
2. リスト02
3. リスト03

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>

最後に

ul、ol、liタグの基本的な説明をしましたがどうでしたでしょうか?

今回学んだことをまとめると、

・<ul>は黒ポチの箇条書き
・<ol>は番号付きの箇条書き

とりあえずこれを覚えておけば大丈夫です!

今回は基本の基本でしたが、実戦で使うにはもっと応用的な話も必要になると思うので、また別の機会に紹介したいと思います!

ではまた!