【超初心者向け】HTMLのul, ol,liタグの使い方をわかりやすく解説

Webページで情報を整理するのに便利なのがリストタグです。

この記事では、超初心者向けにHTMLの <ul>, <ol>, <li> タグの使い方をわかりやすく解説します！

リストとは？

リストとは、情報をわかりやすく整理するための箇条書きのことです。

例えばこんなものがリストです：

• りんご
• バナナ
• オレンジ

このように、情報を並べて表示することで見やすくなります。

HTMLでは、このリストを作るために「リストタグ」を使います。

順序なしリスト（<ul>）の使い方

📝 完成イメージ:

• りんご
• バナナ
• オレンジ

このような箇条書きを作るためのHTMLを、これから解説します！

基本の書き方:

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

💡 ポイント:

• <ul>でリスト全体を囲み、各項目を<li>タグで囲みます。
• デフォルトでは、項目の先頭に「●」のようなマーク（黒丸）がつきます。

順序ありリスト（<ol>）の使い方

📝 完成イメージ:

1. HTMLを学ぶ
2. CSSを学ぶ
3. JavaScriptを学ぶ

このような順番付きのリストを作るためのHTMLを、これから解説します！

✅ 基本の書き方:

<ol>
  <li>HTMLを学ぶ</li>
  <li>CSSを学ぶ</li>
  <li>JavaScriptを学ぶ</li>
</ol>

💡 ポイント:

• <ol>は「順番が重要なリスト」に使います。
• デフォルトでは、項目の先頭に「1. 2. 3.」のような数字が自動で付けられます。

リストのネスト（入れ子構造）

📝 完成イメージ:

• フルーツ
  • りんご
  • バナナ
• 野菜
  • にんじん
  • キャベツ

このような階層的なリストを作るためのHTMLを、これから解説します！

✅ ネストの例:

<ul>
  <li>フルーツ
    <ul>
      <li>りんご</li>
      <li>バナナ</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>にんじん</li>
      <li>キャベツ</li>
    </ul>
  </li>
</ul>

💡 ポイント:

• <li>の中に新しい<ul>や<ol>を入れて、階層的に情報を整理します。

📝 おさらいクイズ！

1️⃣ 順序なしリストを作成する正しいタグはどれ？

A:

<ol>
  <li>犬</li>
  <li>猫</li>
</ol>

B:

<ul>
  <li>犬</li>
  <li>猫</li>
</ul>

✅ 答え: → Bが正解！ <ul>は順序なしリストを作るためのタグです。

2️⃣ ネストされたリストの正しい構造はどれ？

A:

<ul>
  <li>動物</li>
    <li>犬</li>
    <li>猫</li>
</ul>

B:

<ul>
  <li>動物
    <ul>
      <li>犬</li>
      <li>猫</li>
    </ul>
  </li>
</ul>

✅ 答え: → Bが正解！ ネストする場合は、親の<li>の中に子のリストを入れます。

まとめ

• <ul>：順序なしリスト（●マーク付き）
• <ol>：順序ありリスト（数字付き）
• <li>：リストの各項目を示すタグ
• ネストで階層的なリストも作れる！