▼dl+dt+ddの例
▼dialog+dt+ddの例
<style>
dialog { margin:10px 0; padding:10px; border:1px solid #ccc; display:block; }
dl { margin:0 0 20px 0; padding:0; }
dt { margin:0 0 10px 0; padding:0; }
dd { margin:0 0 10px 1em; padding:0; }
dialog dt { margin:0; padding:0 0 0 21px; color:#ff6699; background:transparent url(/content/img/icon/color/female.png) no-repeat 0 center; }
dialog dd { margin:0; padding:0 0 0 21px; color:#56a1fe; background:transparent url(/content/img/icon/color/male.png) no-repeat 0 center; }
</style>
<p>▼dl+dt+ddの例</p>
<dl>
<dt>項目A</dt>
<dd>項目Aの内容</dd>
<dt>項目B</dt>
<dd>項目Bの内容</dd>
<dt>項目C</dt>
<dd>項目Cの内容</dd>
</dl>
<p>▼dialog+dt+ddの例</p>
<dialog>
<dt>最近どぉ!?</dt>
<dd>まーまーかな。そっちはどうなの?</dd>
<dt>うーん。至ってふつー。何かいいことあったの?</dt>
<dd>別に。脳天気なだけだよ。</dd>
<dt>またー、そんなこといって?ほんとはいい事あったんでしょ!?</dt>
<dd>相変わらず勘ぐり深いね。。。</dd>
</dialog>