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

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

tag02.png

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要素ワンセットで左寄せにして、横に並べてみます。

tag03.png

[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要素でワンセットになっていることを利用し、シンプルなマークアップができます。