dl , dt , dd とは
- ここで説明する dl , dt , dd とは次の語句からなる HTML の要素です。
- definition
- 読み: ディフィニション
意味: 定義 - list
- 読み: リスト
意味: 目録 - term
- 読み: ターム
意味: 用語 - description
- 読み: デスクリプション
意味: 説明
dl , dt , dd 要素の概要
dl , dt , dd 要素は、定義リストを表すために使用します。
定義リストのマークアップの意味としては、「 用語のリストを定義する 」ということになります。 これは、ブラウザ上での表示も重要ですが、dl 要素で内包された部分が一つのコンテンツとして成立します。
要素名の頭文字である 「 d 」 とは、Definition のことで、「 定義 」 という意味になります。 その意味を踏まえた上で下記の 3 項目を見て下さい。
- dl = Definition (定義) + List (目録) = リストを定義する
- dt = Definition (定義) + Term (用語) = 用語を定義する
- dd = Definition (定義) + Description (説明) = 説明を定義する
マークアップの意味を上記のことから考え、解釈すると 「 用語 」 と、それについての 「 説明 」 を 「 定義 」 するリストということになります。
この要素には、開始タグと終了タグが必要です。
<dl> <dt>~</dt> <dd>~</dd> </dl>
dl を親要素として、dt と dd を内包するように記述します。
サンプルコードと実行結果
ここでは、「 Definition 」、「 List 」、「 Term 」、「 Description 」 の各用語の説明をしたリストを作成してみました。
サンプルコード: CSS
<style>
dl{
background-color: ##white;
padding: 1em;
width: fit-content;
}
dt{
font-weight: bolder;
}
dd:not(dd:last-child){
margin-bottom: 1em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
</head>
<body>
<dl>
<dt>Definition</dt><dd>ディフィニションと読みます。定義という意味になります。</dd>
<dt>List</dt><dd>リストと読みます。目録という意味になります。</dd>
<dt>Term</dt><dd>タームと読みます。用語という意味になります。</dd>
<dt>Description</dt><dd>デスクリプションと読みます。説明という意味になります。</dd>
</dl>
</body>
- Definition
- ディフィニションと読みます。定義という意味になります。
- List
- リストと読みます。目録という意味になります。
- Term
- タームと読みます。用語という意味になります。
- Description
- デスクリプションと読みます。説明という意味になります。
定義リストの各要素についてのまとめ
定義リストの各要素 (タグ) は下記のように配置します。
<dl> <dt>用語を記述</dt> <dd>説明を記述</dd> </dl>
<dl> ~ </dl> で定義リストの範囲を囲います。
<dt> ~ </dt> タグは 説明したい用語を表すための要素です。
<dd> ~ </dd> タグは 用語の説明文を表すための要素です。