【CSS】 dl で float を使う

HTML&CSS

2007.03.08

サイトトップページのニュースリリースなどで、dlによるfloatはよく使用してます。
昔はtableタグを使用して実現していましたが、「表組み以外でtableタグは使用しない」ことにしています。

WEB標準に順ずるシーブレインの取り組みです。

今回は、dtに日付、ddにニュースタイトルの場合を例としてご紹介します。
サンプルはシーブレインサイトトップページの以下の部分。

htmlタグは以下です。

htmlタグ

<dl>
<dt>2007-02-20</dt>
<dd>辞典機能つきフィードリーダー『G10 Reader』運用開始</dd>
<dt>2006-06-30</dt>
<dd>マニュアル作成ページをリニューアルしました。</dd>
</dl>

CSS設定方法

dl dt {
	float: left;
	width: 5em;
	margin: 0 0 0.5em 0;
	padding: 0;
	line-height: 120%;
}

dl dd {
	_height: 1%; /* Hack for Win IE6 */
	margin: 0 0 0.5em 5em;
	padding: 0;
	line-height: 120%;
}

解説

まず日付部分の dt ですが、width をピクセル指定にしてしまうと文字サイズ拡大時に、折り返してしまい格好が悪いので em で指定。float を指定して dd の要素を回り込ます。

次にタイトル部分の dd ですが、左marginは ddのサイズ分とります。
アンダースコアハックで指定している height は IE6 以下で文章が2行になる場合に、2行目以降の文字位置が左にずれてしまうのを解消しています。

是非使ってみてください。