ゼロからのWeb制作 Vol.13|dlタグ

こんにちは、鈴木です。

今回は、dlタグについての備忘録です。

dlタグを仕事の作業時に使うことがあったのですが上手く使いこなせなかったため、今回は復習をしてアウトプットしていこうと思います。

目次

  1. dlタグとは
  2. dlタグの装飾

1.dlタグとは

dlタグは、ulタグやolタグと同じブロックレベル要素のグループに属していて、定義型リストと呼ばれ辞書のような形で表示されます。

dt要素に定義したい用語を書き、dd要素にその定義した用語の説明を書きます。

<dl>
<dt>単語1</dt>
<dd>説明1</dd>
<dt>単語2</dt>
<dd>説明2</dd>
</dl>

と書くと

dt要素,dd要素

このように表示されます。

2.dlタグの装飾

日付を書き、その横に新着情報を書くなどの際にもdlタグを使うことができます。

dlタグ

こんな感じにしたい場合は、dt要素とdd要素を横並びにします。

HTML
<dl>
<dt>日付</dt>
<dd>新着情報</dd>
</dl>
CSS
dl{
overflow: hidden;
zoom: 1;
}
dt{
width: 100px;
float: left;
clear: both;
}
dd{
padding: 0 0 5px 100px;
}

まず、dt要素にfloatを指定することでdd要素が回り込みます。項目が増えても形が崩れないようにclear:both;を指定します。

dt要素で指定した横幅の値とdd要素で指定するpadding-leftの値が異なると、表示が崩れることがあるので注意してください。