【6日でできるHTML＆CSS入門】リスト

―「リスト」タグで情報を整理しよう―
　Web ページでは、関連する要素を箇条書きや番号付きで並べる場面が多々あります。そこで登場するのが リストタグ (<ul>, <ol>, <li>) です。本記事では「番号なしリスト」と「番号ありリスト」の作り方を中心に、リストの装飾方法・入れ子構造・区切り線 (<hr>)・コメント () まで網羅的に学びます。

１．リストの基礎

1.1. 番号なしリスト `<ul>` と `<li>`

<ul> は Unordered List（順序なし）の略です。リストの各項目は <li> で囲みます。

ファイル名： lesson12_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フルーツ一覧</title>
</head>
<body>
  <h1>好きなフルーツ</h1>
  <ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>ブドウ</li>
  </ul>
</body>
</html>

表示結果

1.2. 番号付きリスト `<ol>` と `<li>`

<ol> は Ordered List（順序あり）。自動で 1, 2, 3… が付きます。

ファイル名： lesson12_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>旅行プラン</title>
</head>
<body>
  <h1>旅行当日の流れ</h1>
  <ol>
    <li>空港に集合</li>
    <li>チェックイン</li>
    <li>搭乗ゲートへ移動</li>
  </ol>
</body>
</html>

表示結果

1.3. ネスト（入れ子）されたリスト

リスト項目の中に別のリストを入れることで階層構造を表せます。

<ul>
  <li>和食
    <ul>
      <li>寿司</li>
      <li>天ぷら</li>
    </ul>
  </li>
  <li>洋食
    <ul>
      <li>パスタ</li>
      <li>ステーキ</li>
    </ul>
  </li>
</ul>

２．リストの装飾とカスタマイズ

2.1. `<ul>` の `type` 属性

記号を黒丸・白丸・四角に変更できます。

<h2>白丸リスト</h2>
<ul type="circle">
  <li>ギター</li><li>ピアノ</li><li>バイオリン</li>
</ul>

2.2. `<ol>` の `type` 属性

番号形式を a, A, i, I などに変更できます。

<h2>ローマ数字</h2>
<ol type="i">
  <li>序章</li><li>本論</li><li>結論</li>
</ol>

2.3. 開始番号を変える `start` 属性

<ol start="5">
  <li>五番目</li><li>六番目</li>
</ol>

３．区切り線とコメント

<h2>前菜</h2>
<ul><li>サラダ</li></ul>
<hr>
<h2>メイン</h2>
<ul><li>ステーキ</li></ul>

3.1. `<hr>` で内容を区切る

<h2>前菜</h2>
<ul><li>サラダ</li></ul>
<hr>
<h2>メイン</h2>
<ul><li>ステーキ</li></ul>

水平線で前菜とメインを視覚的に分離できます。

3.2. コメント ``

コード内のメモはブラウザに表示されません。

<!-- ここは開発者向けのメモです -->

４．実践サンプル（まとめて応用）

ファイル名： lesson12_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>休日プラン</title>
</head>
<body>
  <h1>理想の休日プラン</h1>

  <!-- 箇条書き -->
  <h2>午前中にやること</h2>
  <ul type="square">
    <li>公園でジョギング</li>
    <li>カフェで朝食</li>
    <li>読書タイム</li>
  </ul>

  <hr>

  <!-- 番号付き -->
  <h2>午後のスケジュール</h2>
  <ol type="A" start="3">
    <li>映画鑑賞</li>
    <li>ショッピング</li>
    <li>友人とディナー</li>
  </ol>
</body>
</html>

表示結果

　実行すると、午前中の予定は四角形マーカー、午後は A, B, C… の番号で表示されます（開始番号は 3 → C から）。

５．使用タグ一覧

タグ	用途	主な属性	閉じタグ
`<!DOCTYPE>`	文書型宣言	-	不要
`<html>`	HTML 全体	`lang`	必要
`<head>`	メタ情報	-	必要
`<meta>`	文字コードなど	`charset`, `name`, `content`	不要
`<title>`	タブ・ブックマークの題名	-	必要
`<body>`	表示内容	-	必要
`<h1>〜<h6>`	見出し	-	必要
`<ul>`	番号なしリスト	`type`	必要
`<ol>`	番号付きリスト	`type`, `start`, `reversed`	必要
`<li>`	リスト項目	-	必要
`<hr>`	水平線	-	不要
`<!-- -->`	コメント	-	不要

まとめ

<ul> と <ol> は情報を整理し、可読性を高める必須タグ。
type や start 属性でマーカー・番号を自由に変更可能。
<hr> とコメントを併用すると、ソースも見やすくメンテしやすい。

リストタグを使いこなせば、メニューや目次、手順説明など幅広い UI を簡潔に実装できます。

【6日でできるHTML＆CSS入門】リスト