HTMLコーダー必見のdl dt ddタグの基礎から応用まで！

更新日: 2020年09月17日

dl,dt,ddタグの正しいマークアップ方法

dl要素の内容にはdt要素が1つ以上先に、dd要素が1つ以上続いてその後に記述されなければなりません。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>

また、必ずしもdt要素とdd要素は1つの対でなくとも構いません。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dd>オレンジジュースなど</dd>
</dl>


<dl>
<dt> ソフトドリンク</dt>
<dt>ノンアルコールビール</dt>
<dd>未成年者が飲むこと可</dd>
</dl>

dl要素を入れ子構造にすることもできます。

<dl>
  <dt>ソフトドリンク</dt>
    <dd>紅茶やコーヒー・果物ジュースなど
      <dl>
        <dt>アイスコーヒー</dt>
        <dd>冷やしたコーヒー飲料</dd>
　　</dl>
  </dd>
</dl>

スタイルシートで横並びにする

dt要素とdd要素には改行が入ります。改行しないようにするcompact属性はHTML5では廃止されています。
デザインをスタイルシートで一元的に管理する流れが波及したのでしょう。

dl要素を横並びにするには以下のようにCSSで調整します。

[HTML]

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
<dd>20歳未満は飲めない飲料</dd>
<dt>炭酸飲料</dt>
<dd>炭酸ガスの入った飲料</dd>
</dl>

[CSS]

dt {
	    /左に寄せる/
	    float: left ;
	    /後続の左寄せを解除/
	    clear: left ;
	    margin-right: 0.5em ;
	    width: 120px ;
}

dd {
	    float: left ;
	    margin-left: 1em ;
}

dd要素にclearを指定すると、dd要素が複数連なるときに左寄せが崩れてしまいます。dt要素にwidthを指定することによって、dd要素の頭を揃えることができます。

dl要素ごと横に並べる画像のアーカイブ

続いてdl要素ワンセットで左寄せにして、横に並べてみます。

[CSS]

 img {
	     width: 250px ;
	     height: 187px ;
}

dl {
	    float: left ;
	    padding-right: 2px ;
	    text-align: center ;
}

dt {
	    float: left ;
	    clear: left ;
	    width: 250px ;
	    height: 1.6em ;
	    background-color: #8F82F8 ;
	    font-weight: bold ;
}

dd {
	    margin-left: 0px ;
	    width: 250px ;
	    height: 187px ;
}

HTMLタグでは、dd要素に画像を入れています。

[HTML]

<dl>
<dt>ピンク色のバラ</dt>
<dd><img src="image/bara_01.jpg" alt="" /></dd>
</dl>
<dl>
<dt>白いバラ</dt>
<dd><img src="image/bara_02.jpg" alt="" /></dd>
</dl>
<dl>
<dt>赤いバラ</dt>
<dd><img src="image/bara_03.jpg" alt="" /></dd>
</dl>

スタイルシートでdl要素ごと左へフロートしていきます。あとは追加すれば右側に次々とアーカイブされて行きます。liタグで起きがちなテキストの回り込みも、dl要素がdt要素とdd要素でワンセットになっていることを利用し、シンプルなマークアップができます。

▼プログラミング不要でサイト更新できるCMS