【HTML入門 #03】リストを使って情報を整理しよう！

6/24/2025

著者: yasuzaki

カテゴリ: HTML

タグ:

アイキャッチ

今回の目標

今回は、**リスト（箇条書き・番号付きリスト）**を使って、HTMLで情報を見やすく整理する方法を学びます。よく使われる構文なので、基本を押さえておきましょう。

HTMLで使えるリストの種類

HTMLには主に2種類のリストがあります。

  • 順不同リスト（ul） … 箇条書き。順序に意味がない場合に使用。
  • 番号付きリスト（ol） … 数字付き。順序に意味がある場合に使用。

それぞれリストアイテム（項目）には <li> タグを使います。

順不同リスト（ul）の例

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>ぶどう</li>
</ul>

これはブラウザで以下のように表示されます：

  • りんご
  • バナナ
  • ぶどう

番号付きリスト（ol）の例

<ol>
  <li>起きる</li>
  <li>朝ごはんを食べる</li>
  <li>学校へ行く</li>
</ol>

表示結果：

  1. 起きる
  2. 朝ごはんを食べる
  3. 学校へ行く

実際のHTMLコード

以下のようにページ全体にリストを組み込むことができます。

<!DOCTYPE html>
<html>
  <head>
    <title>リストの例</title>
  </head>
  <body>
    <h1>好きなフルーツ</h1>
    <ul>
      <li>りんご</li>
      <li>みかん</li>
      <li>もも</li>
    </ul>

    <h1>朝のルーティン</h1>
    <ol>
      <li>起きる</li>
      <li>顔を洗う</li>
      <li>ごはんを食べる</li>
    </ol>
  </body>
</html>

よくあるつまずきポイント

  • <ul> や <ol> を閉じ忘れるとレイアウトが崩れる
  • <li> をリストの外に書いてしまうとエラーや無効になる

補足：入れ子（ネスト）リスト

リストの中にリストを入れることもできます。

<ul>
  <li>果物
    <ul>
      <li>りんご</li>
      <li>バナナ</li>
    </ul>
  </li>
  <li>野菜</li>
</ul>

まとめ

  • <ul> は順不同リスト、<ol> は番号付きリスト
  • 各項目は <li> タグで囲む
  • 見やすい情報整理のためにリストは非常に重要

次回予告

次回は「表（table）」を使って、データを行と列で整えて表示する方法を学びます！

＜＜ 前の記事：次の記事 ＞＞