【HTML】レッスン1-04：３種類のリストを理解しよう

一つ前の章ではリンクと画像の挿入方法について学習しました。

今回は３種類のリストについて見ていきましょう。

Lesson1-0：HTML/CSSの開発環境を無料で整備しよう
Lesson1-1：HTML学習の入り口｜Webページの基本構造を理解しよう
Lesson1-2：基本的なHTMLタグを理解しよう
Lesson1-3：Webページにリンクや画像を挿入しよう
Lesson1-4：３種類のリストを理解しよう◁今回はココ
Lesson1-5：テーブル（表）の基礎を理解しよう
Lesson1-6：フォームを作成しよう
Lesson1-7：セクションタグとメタタグを知ろう

リストは関連する項目を箇条書きや番号付きで整理して表示するための手法です。

ウェブページではリストを使うことで情報をわかりやすく伝えることができ、例えば買い物リスト、手順の説明、やることリストなど、日常的な場面でも役立つ場面が多くあります。

HTMLではリストを作成するために以下の3種類のタグが用意されています。

  1. 順序付きリスト（Ordered List）: 番号付きのリスト。
  2. 順序なしリスト（Unordered List）: 箇条書きのリスト。
  3. 定義リスト（Definition List）: 用語とその説明を表示するリスト。

これらのリストタグを使うことで、構造化された情報を簡単に作成することができます。

それぞれのリストの使い方について、この後のセクションで詳しく解説していきます。

<<前のページ HTML/CSSの記事一覧 次のページ>>

順序付きリスト（Ordered List）

順序付きリストは番号付きで項目を並べたい場合に使用します。例えば、手順を説明する場面やランキングを表示する際に適しています。

HTMLでは順序付きリストを作成するために <ol>（Ordered List）タグを使用します。

リストの各項目は <li>（List Item）タグで囲みます。基本的な構造は以下の通りです。

<ol>
  <li>最初の項目</li>
  <li>次の項目</li>
  <li>最後の項目</li>
</ol>

上記のコードをブラウザで表示すると、以下のように番号付きリストが表示されます。

属性を使ったカスタマイズ

<ol>タグには、リストの見た目を変更するための属性があります。

type 属性: 番号の形式を指定します。

  • "1": デフォルトのアラビア数字（例: 1, 2, 3）。
  • "A": アルファベットの大文字（例: A, B, C）。
  • "a": アルファベットの小文字（例: a, b, c）。
  • "I": ローマ数字の大文字（例: I, II, III）。
  • "i": ローマ数字の小文字（例: i, ii, iii）。

コードの例とその表示結果は以下の通りです。

<ol type="A">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

A. 項目1
B. 項目2
C. 項目3

start 属性: リストの開始番号を指定します。

<ol start="5">
  <li>項目1</li>
  <li>項目2</li>
</ol>

このコードの表示結果は以下の通りです。

5. 項目1
6. 項目2

順序なしリスト（Unordered List）

順序なしリストは、箇条書きの形式で情報を表示したい場合に使用します。例えば、買い物リストや重要なポイントを箇条書きにしたいときに役立ちます。

HTMLでは順序なしリストを作成するために <ul>（Unordered List）タグを使用します。リストの各項目は順序付きリストと同様に <li>（List Item）タグで囲みます。

以下は基本的な構造です。

<ul>
  <li>最初の項目</li>
  <li>次の項目</li>
  <li>最後の項目</li>
</ul>

上記のコードをブラウザで表示すると、以下のように箇条書きリストが表示されます。

定義リスト（Definition List）

定義リストは用語とその説明を組み合わせて表示する場合に使用します。例えば、辞書のような構造や、項目に関する詳細情報を表示する際に役立ちます。

HTMLでは定義リストを作成するために <dl>（Definition List）タグを使用します。

リスト内の各用語は <dt>（Definition Term）タグで囲み、その説明は <dd>（Definition Description）タグで囲みます。

以下は基本的な構造です。

<dl>
  <dt>HTML</dt>
  <dd>ウェブページを作成するためのマークアップ言語。</dd>
  <dt>CSS</dt>
  <dd>ウェブページのデザインやレイアウトを指定するためのスタイルシート言語。</dd>
  <dt>JavaScript</dt>
  <dd>ウェブページに動きを加えるためのプログラミング言語。</dd>
</dl>

上記のコードをブラウザで表示すると、以下のように表示されます。

定義リストの使い方

定義リストは単なる箇条書きリストよりも、情報をよりわかりやすく提示するのに適しています。

たとえば、用語集、FAQ、製品の特徴リストなどでよく使用されます。

ネストされたリスト（Nested List）

ネストされたリストとは、リストの中にさらに別のリストを入れ子構造として組み込んだ形式です。

これにより複雑な階層構造を持つ情報を整理して表示することが可能になります。

順序付きリスト、順序なしリスト、定義リストのいずれでも入れ子構造を作成することができます。

基本構造

以下は順序なしリストの中に順序付きリストをネストした例です。

<ul>
  <li>果物
    <ol>
      <li>リンゴ</li>
      <li>バナナ</li>
      <li>オレンジ</li>
    </ol>
  </li>
  <li>野菜
    <ol>
      <li>キャベツ</li>
      <li>ニンジン</li>
    </ol>
  </li>
</ul>

順序付きリストの中に順序なしリストをネストする

逆に、順序付きリストの中に順序なしリストをネストすることも可能です。

<ol>
  <li>準備するもの
    <ul>
      <li>ノート</li>
      <li>ペン</li>
      <li>教科書</li>
    </ul>
  </li>
  <li>学習内容
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
</ol>

ネストされたリストの注意点

ネストされたリストを使う際の注意点として、以下の点に留意してください。

  1. 階層を明確にする: 視覚的なわかりやすさを確保するため、適切にインデントを使用すること。
  2. 深さを抑える: 階層が深すぎると見づらくなるため、過剰なネストは避けること。
  3. 一貫性を保つ: リストの種類を混在させる場合、全体の構造が一貫しているか確認すること。

まとめ

リストはHTMLで情報を整理して表示するための重要な機能の一つです。

この章では、以下の3種類のリストについて学びました。

  1. 順序付きリスト（Ordered List）: 番号付きで情報を表示するリストで、手順やランキングの表現に適しています。
  2. 順序なしリスト（Unordered List）: 箇条書き形式で情報を整理するリストで、買い物リストや要点の説明に便利です。
  3. 定義リスト（Definition List）: 用語とその説明を組み合わせて表示するリストで、用語集やFAQなどに役立ちます。

またリストを入れ子構造で組み合わせることで、複雑な階層構造を作成できることも学びました。これにより、より多くの情報を視覚的に整理して表示することが可能になります。

リストの活用は、HTMLを使った情報整理の基本スキルです。

次の章では、さらに高度なHTMLの機能について学んでいきましょう。引き続き学習を進めてください！

練習問題1-4：スパゲティのレシピを作成しよう

VSCで「Lesson1-4.html」というファイルを作って保存してください。

そのファイルにhtmlコードを書き、ブラウザに以下のように表示させましょう。

初めてのWebサイトを作ろう1-4

このサイトのLesson1-1からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson1-4の学習内容をまとめよう

VSCを使ってlesson1フォルダの中に「MyWebsite1-4.html」というファイルを作ってください。

その後、MyWebsite1-4.htmlにこのLesson1-4で学習した内容をまとめてみましょう。

自分で記事を見直してまとめることを推奨しますが、模範解答も用意しましたので必要な方はこちらを活用して下さい。

模範解答（ブラウザ表示）

※本サイトはCSSが入っているため、少々デザインが違っています。

Lesson1-4：リストの作成（h1タグ）

１．順序付きリスト（h2タグ）

順序付きリストは番号付きで項目を並べたい場合に使用

  1. <ol>タグ：順序付きリストを作成
  2. <li>タグ：リストの項目を作成
  3. type属性：リストの番号形式を指定
    • “1”：デフォルトのアラビア数字（例: 1, 2, 3）
    • “A”: アルファベットの大文字（例: A, B, C）
    • “a”: アルファベットの小文字（例: a, b, c）
    • “I”: ローマ数字の大文字（例: I, II, III）
    • “i”: ローマ数字の小文字（例: i, ii, iii）
  4. 上記のようにリストの中にリストを挿入することを「リストをネストする」という

２．順序なしリスト（h2タグ）

順序なしリストは箇条書きの形式で情報を表示したい場合に使用

  • <ul>タグ：順序無しリストを作成
  • <li>タグ：リストの項目を作成

３．定義リスト（h3タグ）

定義リストは用語とその説明を組み合わせて表示する場合に使用

<dlタグ>
定義リストを作成するタグ
<dtタグ>
リストの用語
<ddタグ>
用語の説明

注意点（h2タグ）

リストの種類（順序付き・順序なし・定義リスト）を適切に使い分ける。

ネストリストの使い過ぎに注意し、可読性を確保する。

定義リストは用語と説明を正しく対応させる。

トップページへ戻る

模範解答（htmlコード）
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lesson1-4：リストの作成</title>
</head>
<body>
    <h1>Lesson1-4：リストの作成</h1>
    <img src="../image/Lesson1-4 ３種類のリストを理解しよう.jpg" alt="Lesson1-4 ３種類のリストを理解しよう">

    <h2>１．順序付きリスト</h2>
    <p>順序付きリストは番号付きで項目を並べたい場合に使用</p>
    <ol>
        <li>&lt;ol>タグ：順序付きリストを作成</li>
        <li>&lt;li>タグ：リストの項目を作成</li>
        <li>type属性：リストの番号形式を指定</li>
        <ol type="A">
            <li>"1"：デフォルトのアラビア数字（例: 1, 2, 3）</li>
            <li>"A": アルファベットの大文字（例: A, B, C）</li>
            <li>"a": アルファベットの小文字（例: a, b, c）</li>
            <li>"I": ローマ数字の大文字（例: I, II, III）</li>
            <li>"i": ローマ数字の小文字（例: i, ii, iii）</li>
        </ol>
        <li>上記のようにリストの中にリストを挿入することを「リストをネストする」という</li>
    </ol>

    <h2>２．順序なしリスト</h2>
    <p>順序なしリストは箇条書きの形式で情報を表示したい場合に使用</p>
    <ul>
        <li>&lt;ul>タグ：順序無しリストを作成</li>
        <li>&lt;li>タグ：リストの項目を作成</li>
    </ul>

    <h2>３．定義リスト</h2>
    <p>定義リストは用語とその説明を組み合わせて表示する場合に使用</p>
    <dl>
        <dt>&lt;dlタグ></dt>
        <dd>定義リストを作成するタグ</dd>
        <dt>&lt;dtタグ></dt>
        <dd>リストの用語</dd>
        <dt>&lt;ddタグ></dt>
        <dd>用語の説明</dd>
    </dl>

    <h2>注意点</h2>
    <p>リストの種類（順序付き・順序なし・定義リスト）を適切に使い分ける。</p>
    <p>ネストリストの使い過ぎに注意し、可読性を確保する。</p>
    <p>定義リストは用語と説明を正しく対応させる。</p>

    <p>トップページへ<a href="../MyWebSite.html">戻る</a></p>
</body>
</html>

このコードをコピーしてMyWebsite1-3.htmlに張り付けてください。

まとめ

お疲れさまでした！

今回の問題に挑戦して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう！

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト＆問題集トップへ戻る
    トップページへ戻る