<dd>

用語の説明

dl の中で、直前の dt に対する説明や値を表します。ブラウザは既定で左に字下げして表示します。

サンプルコード

HTML

1<dl>

2 <dt>ブレンド</dt>

3 <dd>苦味とコクのバランスがよい定番の味。</dd>

4 <dd>¥480</dd>

5</dl>

ブラウザでの表示

dd は "description details" の略で、直前の dt の説明です。1つの dt に対して dd を複数書くこともできます。

ブラウザは dd に既定で40pxほどの左マージンを付けます。字下げが不要な場合は margin-left: 0 を指定します。

dd の中には段落やリストなど、ブロック要素も入れられます。

質問を dt、回答を dd にすると、意味のまとまったFAQになります。

HTML

1<dl class="faq">

2 <dt>予約はできますか？</dt>

3 <dd>4名様以上からご予約いただけます。</dd>

4</dl>

CSS

1.faq dt::before {

2 content: "Q. ";

4.faq dd {

5 margin-left: 0;