dlタグ -定義リストを作成する｜HTML辞典
<dl>タグとは？
<dl>タグは、定義リスト（用語とその説明）を作成するためのタグ です。
リスト内の各項目は <dt>（定義される用語）と <dd>（その説明）の組み合わせで構成されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<dl> は開始タグ（<dl>）と閉じタグ（</dl>）の両方が必要です。
また、リスト内の <dt> と <dd> も開始タグと閉じタグの両方を持ちます。
基本的な記述方法
<dl>
<dt>HTML</dt>
<dd>Webページを作成するためのマークアップ言語</dd>
<dt>CSS</dt>
<dd>Webページのデザインやレイアウトを設定するスタイルシート言語</dd>
</dl>使用できる主な属性
<dl>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <dl class="definition-list">...</dl> |
id | 一意の識別子を設定 | <dl id="tech-glossary">...</dl> |
style | インラインスタイルを適用 | <dl style="border: 1px solid #ccc;">...</dl> |
CSSを使ったデザイン変更
定義リストのスタイルを調整したい場合は、CSSを活用できます。
dl {
margin: 20px 0;
}
dt {
font-weight: bold;
margin-top: 10px;
}
dd {
margin-left: 20px;
color: #666;
}適切な使用例
✅ <dl> を使って用語の説明を作成する
<dl>
<dt>ブラウザ</dt>
<dd>Webページを閲覧するためのソフトウェア</dd>
<dt>レスポンシブデザイン</dt>
<dd>デバイスの画面サイズに応じてレイアウトを調整するデザイン手法</dd>
</dl>✅ <dl> を使ってFAQを作成する
<dl>
<dt>Q: HTMLとは何ですか？</dt>
<dd>A: Webページを作成するための言語です。</dd>
<dt>Q: CSSとは何ですか？</dt>
<dd>A: Webページのデザインを設定するための言語です。</dd>
</dl>適切でない使用例（誤った使い方）
❌ <dl> の中で <dt> や <dd> を省略するのはNG
<!-- NG: <dt> や <dd> を省略 -->
<dl>
HTML - Webページを作成するための言語
CSS - デザインを設定するための言語
</dl><dl>
<dt>HTML</dt>
<dd>Webページを作成するための言語</dd>
<dt>CSS</dt>
<dd>デザインを設定するための言語</dd>
</dl><!-- NG: <dt> の後に <dd> を記述していない -->
<dl>
<dt>JavaScript</dt>
<dt>Python</dt>
<dd>人気のあるプログラミング言語</dd>
</dl><dl>
<dt>JavaScript</dt>
<dd>動的なWebサイトを作成するためのプログラミング言語</dd>
<dt>Python</dt>
<dd>AIやデータ分析に広く使われるプログラミング言語</dd>
</dl><dl>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<dl> | 定義リストを作成 | <dt> と <dd> を含む | 用語集、FAQの作成 |
<ul> | 順序のないリストを作成 | リストマーカー（●、■ など）を表示 | メニュー、箇条書き |
<ol> | 順序のあるリストを作成 | 番号付きリスト（1, 2, 3…） | 手順の説明、ランキング |
<li> | リストの各項目 | <ul> や <ol> の中で使用 | 箇条書きの作成 |
使用上の注意点
✅ <dt> と <dd> は <dl> の中でのみ使用する
<dt>だけで説明なしの項目を作らない。
関連タグ
まとめ
<dl>タグは、HTML文書内で定義リスト（用語とその説明）を作成するためのタグです。<dt> （用語）と <dd> （説明）とセットで使用し、FAQや用語集の作成に適しています。
