HTMLのdl・dt・ddの使い方のまとめ
1172 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はdl・dt・ddの使い方のまとめの記事です。
dl・dt・ddって何？
例で説明します。
例えばりんごの魅力を説明したいとしてどう魅力があるのかを説明する時にdl・dt・ddを使います。
dl・dt・ddの役割は以下になります。
- dl（description list） : 説明したい内容の大枠に使う
- dt（description term） : 説明したい内容
- dd（definition description） : 説明したい内容の説明文
dlの中に説明したい内容と説明したい内容の説明文を入れて使います。
具体的に使い方を見ます。
基本的な使い方
↓のコードを見て下さい。
dlの中にdtとddを入れます。
そしてdtの中に説明したい内容を書いてddの中に説明文を書きます。
ddは1つだけではなく複数付けることもできます。
今dtが1つに対して ddが2つある例を見ましたがdtは1つしか使えない訳ではなく使う個数はバリエーションがあります。
次はそれを見ていきます。
1つのdtに対して複数のdd
これはさっき見ました、↓です。
ddは何個付けてもいいです。
複数のdtに対して1つのdd
これはあまり使う事がない気がしますがdtを複数にしてddを1つだけにする事もできます。
1つのdtに対して1つのddのセットが複数
これはよく使う印象ですが1つのdtに対して1つのddのセットを複数作る事もできます。
これで説明を終わります。