どんなタグ？
用語説明のリストを表す要素。
<dl>
<dt>生年月日</dt>
<dd><time datetime="1990-04-01">1990年04月01日</time></dd>
<dt>職業</dt>
<dd>勇者</dd>
<dt>勤務地</dt>
<dd>世界中</dd>
</dl>
<dl> ~ </dl>で挟まれた範囲が、説明リストを表すタグです。HTML4.01では「definition list（定義）」でしたが、HTML5では「description list（説明）」となり、タグの持つ意味（役割）が変わりました。よって、使用できる幅が広がりました。
- どのカテゴリに属しているの？
- dlタグは フロー・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
- dlタグが梱包できるタグ（コンテンツ・モデル）は、dt要素とそれに続くdd要素（0個以上）、もしくはそれらを子要素に持つdiv要素となります。梱包できる順番も決まっており、div > dt・dd の順での梱包となります。
dlとdtとddはセットで使いましょう！
どうやって使うの？
基本は<dt>と<dd>を <dl>で挟みます。
用語の説明リストや何かの手順を箇条書きで説明する場合などに使用します。
<dl>内の要素は記述順が決まっているので、必ず<dt>の後に<dd>を書くようにしましょう。
<dt>と<dd>のセットは、複数表記することが可能です。
また、<dl>内で<dt>と<dd>のセットを<div>でまとめることができます。
- 使い方
-
<dl> <dt>説明する用語</dt> <dd>用語の説明</dd> </dl>
<body>
<dl>
<dt>ポメラニアン</dt>
<dd>ポメラニアンは小さな頭に丸い大きな目、手足も小さく、尻尾は背中に向けて巻いており、独特の豪華な毛吹きが特徴です。</dd>
<dt>トイプードル</dt>
<dd>クルンとカールした毛がチャーミングなトイプードル。シングルコートの巻き毛は抜けにくく、体臭もほとんどないのが特徴です。</dd>
</dl>
</body>https://codehero.shibajuku.net/html/dl/dl_sample01/
<body>
<dl>
<div>
<dt>ポメプー</dt>
<dd>ポメラニアン×トイプードル</dd>
</div>
<div>
<dt>マルプー</dt>
<dd>マルチーズ×トイプードル</dd>
</div>
<div>
<dt>チワプー</dt>
<dd>チワワ×トイプードル</dd>
</div>
</dl>
</body>dl div {
border: 1px solid #000;
margin-bottom: 30px;
}https://codehero.shibajuku.net/html/dl/dl_sample01_2/
- どこでも使えるの？
- dlタグは フロー・コンテンツ が配置できる場所ならどこでも使えます。
- 気をつけることは？
- 子要素はdt・dd・divしか使えません。
divを使えば、dtとddを囲ったそれぞれのグループにスタイルを当てることもできます！
使える属性は？
グローバル属性のみ使えます。
<dl>タグには、どの要素にでも使えるグローバル属性のみ使えます。
グローバル属性のみ使用可能です！
サンプルが見たい
<dl>タグを使ったサンプルを
いくつか紹介。
<dl>タグを使ったサンプルを紹介します。
基本的な<dl>タグのサンプル
<body>
<dl>
<dt>会社名</dt>
<dd>株式会社Dummy</dd>
<dt>代表取締役</dt>
<dd>ダミー三田川</dd>
<dt>資本金</dt>
<dd>1億</dd>
</dl>
</body>https://codehero.shibajuku.net/html/dl/dl_sample02/
複数のdtタグに対して1つのddタグを使用
<body>
<dl>
<dt>いちご</dt>
<dt>夏みかん</dt>
<dt>キウイフルーツ</dt>
<dd>これらの果物は、春の果物である。</dd>
</dl>
</body>https://codehero.shibajuku.net/html/dl/dl_sample03/
1つのdtタグに対して複数のddタグを使用
<body>
<dl>
<dt>おいしい春キャベツの見分け方</dt>
<dd>葉の巻きがゆるい</dt>
<dd>芯の直径が500円玉大くらい</dd>
<dd>見た目より軽いもの</dd>
</dl>
</body>https://codehero.shibajuku.net/html/dl/dl_sample04/
メタデータの表示
<body>
<dl>
<dt>名前</dt>
<dd>ポチ</dd>
<dt>犬種</dt>
<dd>ポメラニアン</dd>
<dt>生年月日</dt>
<dd><time datetime="2022-01-23">2020年1月23日</time></dd>
<dt>原産国</dt>
<dd>ドイツ</dd>
</dl>
</body>https://codehero.shibajuku.net/html/dl/dl_sample05/
用途によって、使い方はさまざまです！
デフォルトスタイルは？
上下に1文字分の余白が
空くようになっている。
一般的なブラウザで dl要素を表示した場合、上下に1文字分の余白が入るようになっています。
具体的には、下記のCSSと同等のスタイルが適用されます。
dl {
display: none;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
スペースの調整はCSSでやりましょう。
対応ブラウザは？
基本的には全てのブラウザで利用可能です。 <dl>タグは以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar あり
- Edge
- Edge あり ~
- Google Chrome
- Google Chrome あり ~
- Firefox
- Firefox あり ~
- Safari
- Safari あり ~
- Opera
- Opera あり ~
基本的にはどのブラウザでも問題ないです！
