定義リスト

今まで習ったulとolのリストは分かったんですが、用語集やQ&Aみたいに「用語」と「説明」をセットで表示したい場合はどうすればいいんですか？

実は、そういった用途に特化した「定義リスト」というものがあるんだ。<dl>（description list）、<dt>（description term）、<dd>（description details）を使って表現するよ。

定義リスト？聞いたことがない名前です。どんな時に使うんですか？

用語集、Q&A、仕様書、プロフィール情報など、「見出し」と「詳細」の組み合わせで情報を表現したい場面で活躍するんだ。辞書のように、項目名とその説明を明確に分けて表示できるよ。

定義リストの基本構造

定義リストは、用語（term）とその説明（description）をペアで管理する特別なリスト形式です。一般的なリストとは異なり、項目と説明が明確に区別されています。

基本構造のポイントと作成ルール

定義リストを正しく作成するための重要なポイントと実装ルールを理解しましょう。

基本構造のポイント

作成ルール

これらのポイントやルールを守ることで、用語と説明の関係性が明確で、意味的に正しい構造を作成できます。

定義リストを試してみよう

以下のエディターで定義リストの基本的な書き方を試してみてください。

様々な定義リストのパターン

パターン1：用語集・辞書形式

プログラミング用語やビジネス用語の説明に最適です。

パターン2：Q&A・FAQ形式

よくある質問と回答の組み合わせに効果的です。

パターン3：プロフィール・仕様書形式

人物紹介や製品仕様などの情報整理にも効果的です。

パターン4：複数説明の定義リスト

一つの用語に対して複数の説明を記述することも可能です。

分かりやすい「定義リスト」を作る3つの原則

定義リストは便利ですが、ただペアを作るだけでは逆に分かりにくくなります。 読み手にとって親切なリストを作るには、以下の3つの原則を意識するのが大切です。

原則1：関係性を明確にする

用語と説明の関係が直感的に分かるように、適切なペアリングを行いましょう。「用語 → 説明」の関係が論理的で、読み手が理解しやすいような組み合わせが基本です。

原則2：説明を適切な長さにする

説明が長すぎると読みづらくなり、短すぎると理解できません。1〜3行程度で要点を伝えることを意識し、詳細が必要な場合は複数の<dd>で分割しましょう。

原則3：同じレベルの項目を統一する

同じ定義リスト内では、用語のレベル感や説明の詳しさを揃えましょう。例えば、「具体的な技術名」と「抽象的な概念」が混ざっていると、構造が歪んで見えます。

理解度チェッククイズ

定義リストの特徴と使用方法を理解できたか、クイズで確認してみましょう。

<dl>
①プログラミング①
<dd>コンピューターに指示を与える作業</dd>

①Web開発①
<dd>ウェブサイトやアプリを作る技術</dd>
</dl>

<dl>
<dd>HTML</dd>
<dt>ウェブページの構造を定義する言語</dt>

<dd>CSS</dd>
<dt>ウェブページを装飾する言語</dt>
</dl>

<dl>
<dt>Q. HTMLの学習は難しいですか？</dt>
<dd>A. 基本から順序立てて学べば初心者でも習得できます</dd>

<dt>Q. どのくらいの期間で覚えられますか？</dt>
<dd>A. 毎日1時間程度の学習で、1〜2ヶ月で基本をマスターできます</dd>
</dl>

まとめ

定義リストの使い方がよく分かりました！辞書やFAQページを作る時に絶対使います。

複数の説明を書けるのも便利ですね。一つの言葉をいろんな角度から説明できる。

そういうこと！定義リストは、情報を「構造的」に整理するHTMLの真髄を表している。ただ見た目を作るだけでなく、情報に意味を与えることで、人にもコンピューターにも分かりやすいページになるんだ。次は、より複雑な情報を整理する「表」について学んでいこう。