Webページで箇条書きや手順を表示したいとき、使われるのが リストタグです。
HTMLでは主に <ul>、<ol>、<li> の3つのタグを使ってリストを作ります。

リストタグの種類

• <ul>（unordered list）… 順序なしリスト（点付き）
• <ol>（ordered list）… 順序ありリスト（数字付き）
• <li>（list item）… 各リスト項目

基本的なulリスト（箇条書き）

<ul>
  <li>パン</li>
  <li>チーズ</li>
  <li>ワイン</li>
</ul>

表示例：

• パン
• チーズ
• ワイン

順序ありのolリスト（番号付き）

<ol>
  <li>下準備をする</li>
  <li>材料を混ぜる</li>
  <li>焼き上げる</li>
</ol>

表示例：

1. 下準備をする
2. 材料を混ぜる
3. 焼き上げる

入れ子（ネスト）リスト

リストの中にさらにリストを作ることも可能です。

<ul>
  <li>フルーツ
    <ul>
      <li>りんご</li>
      <li>バナナ</li>
    </ul>
  </li>
</ul>

CSSで見た目をカスタマイズ

リストの「・」や数字はCSSで自由に変えることができます。

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

おわりに

HTMLリストタグは、メニューや手順、特徴の列挙など幅広く活用できます。
<ul>と<ol>の違いをしっかり理解して、適切に使い分けましょう！

次回は「定義リスト（<dl>）」や「リストのカスタムアイコン」について紹介予定です！