7. リストの作成

HTML でリストを作成することは、情報を整理し、わかりやすく表示するために非常に重要です。この章では、リストの基礎から応用までを学びます。

7.1 リストの種類

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

順序付きリスト（Ordered List）
無順序リスト（Unordered List）
定義リスト（Definition List）

それぞれのリストの使い方と例を見ていきましょう。

7.1.1 順序付きリスト（Ordered List）

順序付きリストは、項目に番号が付けられるリストです。例えば、手順やランキングなどで使用します。

使用例:

<ol>
  <li>HTMLを学ぶ</li>
  <li>CSSを学ぶ</li>
  <li>JavaScriptを学ぶ</li>
</ol>

表示:

HTML を学ぶ
CSS を学ぶ
JavaScript を学ぶ

7.1.2 無順序リスト（Unordered List）

無順序リストは、項目に番号が付かないリストです。通常、箇条書きとして使用されます。

使用例:

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

表示:

りんご
バナナ
オレンジ

7.1.3 定義リスト（Definition List）

定義リストは、用語とその定義を対にして表示するリストです。例えば、辞書や用語集で使用されます。

使用例:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Languageの略</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheetsの略</dd>
  <dt>JavaScript</dt>
  <dd>Webページをインタラクティブにするためのプログラミング言語</dd>
</dl>

表示:

HTML : HyperText Markup Language の略

CSS : Cascading Style Sheets の略

JavaScript : Web ページをインタラクティブにするためのプログラミング言語

7.2 リストのネスト

リストは他のリストをネスト（入れ子に）して使用することができます。これにより、階層的な情報を表現することができます。

使用例:

<ul>
  <li>
    フルーツ
    <ul>
      <li>りんご</li>
      <li>バナナ</li>
      <li>オレンジ</li>
    </ul>
  </li>
  <li>
    野菜
    <ul>
      <li>にんじん</li>
      <li>トマト</li>
      <li>レタス</li>
    </ul>
  </li>
</ul>

表示:

フルーツ
りんご
バナナ
オレンジ
野菜
にんじん
トマト
レタス

7.3 リストのカスタマイズ

リストのスタイルや見た目をカスタマイズするためには、CSS を使用します。

例: カスタムスタイルの適用

HTML

<ul class="custom-list">
  <li>日本</li>
  <li>アメリカ</li>
  <li>フランス</li>
</ul>

CSS

.custom-list {
  list-style-type: square; /* 四角形の箇条書き */
  color: blue; /* テキストの色を青に設定 */
}

.custom-list li {
  margin: 5px 0; /* リスト項目間のマージンを設定 */
}

表示:

日本
アメリカ
フランス

これで、HTML でリストを作成する基本的な技術を習得しました。次に実際に試してみましょう。練習を通じて、リスト作成のスキルを身につけてください。