今回は、HTMLでリストを作成する方法について学びましょう。リストは、情報を整理して見やすく表示するのに便利です。順序リストと無順序リストの使い方を紹介します。

順序リスト（olタグ）とは？

順序リストは、番号付きのリストを作成するために使用します。例えば、手順やランキングを表示するのに便利です。順序リストを作成するには、<ol>タグと<li>タグを使います。

順序リストの例

<ol>
  <li>朝食を食べる</li>
  <li>学校に行く</li>
  <li>宿題をする</li>
</ol>

この例では、1. 朝食を食べる、2. 学校に行く、3. 宿題をする、という順序リストが作成されます。

無順序リスト（ulタグ）とは？

無順序リストは、番号のない箇条書きリストを作成するために使用します。例えば、買い物リストや特徴リストを表示するのに便利です。無順序リストを作成するには、<ul>タグと<li>タグを使います。

無順序リストの例

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

この例では、・りんご、・バナナ、・オレンジ、という無順序リストが作成されます。

ネストされたリスト

リストの中にリストを作成することもできます。これをネストされたリストと呼びます。

ネストされたリストの例

<ul>
  <li>果物
    <ul>
      <li>りんご</li>
      <li>バナナ</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>にんじん</li>
      <li>ブロッコリー</li>
    </ul>
  </li>
</ul>

この例では、「果物」と「野菜」という項目の下に、それぞれの詳細な項目がネストされています。

リストをスタイリングする

リストの見た目を変更するには、CSSを使います。例えば、無順序リストの記号を円に変更する場合は、以下のようにします。

CSSでリストをスタイリングする例

<style>
  ul {
    list-style-type: circle;
  }
</style>

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

このスタイルを適用すると、無順序リストの記号がデフォルトの「ディスク」から「サークル」に変更されます。

まとめ

今回は、HTMLでリストを作成する方法について学びました。順序リストと無順序リストを使いこなせるようになると、情報を整理して見やすく表示することができます。