説明リスト：dl、dt、dd
説明リストで用語と定義の組をマークアップします。
「説明リスト：dl、dt、dd」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
説明リストとは
説明リストは、用語とその説明をグループ化します：
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of the web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation of the web.</dd>
<dt>JavaScript</dt>
<dd>The programming language of the web.</dd>
</dl>dl、dt、dd要素
説明リストは、次の3つの要素で構成されます：
<dl>— 説明リストのコンテナー<dt>— 説明する用語（キー）<dd>— 用語の説明（値）
1つのdtに複数のdd
1つの用語に複数の説明を関連付けることができます：
<dl>
<dt>HTML</dt>
<dd>Stands for HyperText Markup Language.</dd>
<dd>First published as HTML 2.0 in 1995.</dd>
<dd>Current version: HTML5 (Living Standard).</dd>
</dl>1つのddに複数のdt
複数の用語で1つの説明を共有できます（同義語や別名など）：
<dl>
<dt>Username</dt>
<dt>Login</dt>
<dt>Handle</dt>
<dd>The unique identifier used to log in to your account.</dd>
</dl>実際の使用例
説明リストは、次の用途に最適です：
- 用語集や定義
- FAQセクション（質問 → 回答）
- 製品メタデータ（著者：Jane、公開日：2024年）
- レシピの詳細（準備時間：10分、4人分）
- APIパラメーターのドキュメント
dlによるFAQ
説明リストでFAQを作成します：
<dl class="faq">
<dt>Is HTML a programming language?</dt>
<dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>
<dt>Do I need to close void elements?</dt>
<dd>In HTML5, void elements like <img> and <br> do not need a closing slash.</dd>
</dl>メタデータにdlを使う
記事や製品のメタデータを表示します：
<article>
<h1>Responsive Images Guide</h1>
<dl class="metadata">
<dt>Author</dt>
<dd>Jane Smith</dd>
<dt>Published</dt>
<dd><time datetime="2024-03-15">March 15, 2024</time></dd>
<dt>Reading time</dt>
<dd>8 minutes</dd>
</dl>
</article>dlのスタイル設定
CSSで説明リストをスタイル設定します：
/* Two-column layout */
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25rem 1rem;
}
dt {
font-weight: bold;
color: #555;
}
dd {
margin: 0; /* Remove browser default dd margin */
}dlの入れ子
説明リストは、階層的な定義のために入れ子にできます：
<dl>
<dt>HTML Elements</dt>
<dd>
<dl>
<dt>Block elements</dt>
<dd>Take full width: div, p, h1-h6</dd>
<dt>Inline elements</dt>
<dd>Flow with text: span, a, strong</dd>
</dl>
</dd>
</dl>キーと値におけるdlとtableの比較
キーと値のデータに<dl>と<table>のどちらを使うか：
- dl — 用語と説明の関連付け（名前と値のペア）
- table — 行と列で構成される表形式のデータ（項目ごとに複数の属性）
<dl>
<dt>Name</dt><dd>Jane</dd>
<dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->dl内のdiv
<dl>内でdt/ddのグループを<div>で囲むことは、HTML5で有効です：
<dl>
<div>
<dt>HTML</dt>
<dd>Markup language for web pages.</dd>
</div>
<div>
<dt>CSS</dt>
<dd>Styling language for web pages.</dd>
</div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->クイックチェック
説明リストで定義や値を含む要素はどれですか？
まとめ：説明リスト
説明リストの基本：
<dl>— 説明リストのコンテナー<dt>— 用語（キー、質問、名前）<dd>— 説明（値、回答、定義）- 1つのdtに複数のddを関連付けられ、複数のdtで1つのddを共有できます
- 用語集、FAQ、メタデータに最適です
- スタイル設定の柔軟性を高めるには、グループを
<div>で囲みます
よくある質問
「説明リスト：dl、dt、dd」レッスンは無料ですか？
はい。「説明リスト：dl、dt、dd」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「説明リスト：dl、dt、dd」で何を学びますか？
説明リストで用語と定義の組をマークアップします。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「説明リスト：dl、dt、dd」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。