定義リスト

定義リストは、用語とその定義を関連付けて表示するのに使用するHTML要素です。定義リストを使うことで、用語集やFAQなどを作成できます。

定義リストの要素

定義リストは、以下の3つの要素で構成されます。

1. <dl>要素（Definition List）
   • 定義リスト全体を囲む要素です。
2. <dt>要素（Definition Term）
   • 定義する用語を表す要素です。
3. <dd>要素（Definition Description）
   • 用語の定義を表す要素です。

以下は、定義リストの基本的な構造です。

See the Pen 定義リスト by sumi (@mesa2a) on CodePen.

dd要素を複数割り当てる

1つの用語に対して複数の定義を割り当てたい場合は、<dd>要素を複数記述できます。

See the Pen 定義リスト（ddの複数割り当て） by sumi (@mesa2a) on CodePen.

定義リストの使いどころ

定義リストは、以下のような場面で使用すると効果的です。

用語集

定義リストを使って、用語集を作成できます。用語とその説明を関連付けて表示することで、読者にとって分かりやすい用語集を作ることができます。

See the Pen 定義リストの例１ by sumi (@mesa2a) on CodePen.

FAQ

定義リストを使って、FAQを作成できます。質問とその回答を関連付けて表示することで、読者にとって分かりやすいFAQを作ることができます。

See the Pen 定義リストの例２ by sumi (@mesa2a) on CodePen.

定義リストを使うことで、用語集やFAQを読みやすく整理できます。

練習問題

以下のテキストを定義リストを使ってマークアップしてください。

See the Pen 定義リストの練習問題 by sumi (@mesa2a) on CodePen.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Languageの略称。</dd>
  <dd>ウェブページの構造を記述するためのマークアップ言語。</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheetsの略称。</dd>
  <dd>HTMLで記述された文書の体裁を指定するための言語。</dd>

  <dt>JavaScript</dt>
  <dd>ウェブブラウザ上で動作するプログラミング言語。</dd>
  <dd>動的なウェブページを作成するために使用される。</dd>
</dl>

まとめ

本記事では、HTMLの定義リストについて詳しく学びました。定義リストは、用語とその定義を関連付けて表示するのに便利な要素です。以下のポイントを押さえておきましょう。

• 定義リストは、<dl>要素、<dt>要素、<dd>要素の3つの要素で構成される
• <dl>要素は定義リスト全体を囲む要素、<dt>要素は定義する用語を表す要素、<dd>要素は用語の定義を表す要素
• 1つの用語に対して複数の定義を割り当てたい場合は、<dd>要素を複数記述することができる
• 定義リストは、用語集やFAQを作成するのに適している
• 定義リストを使うことで、情報を整理し、読みやすく表示することができる