dt と dd を横に並べる CSS

定義リストの要素 dt と dd を CSS で横に並べる方法は幾つかあるのですが、私が最も使用している方法を記述しておきます。

dt {
	float : left;
	width : 10em;
}

dd {
	margin-left : 10em;
}

まず dt を float させつつ width を指定。上のサンプルソースの様に em で指定するとユーザーにテキストサイズを変更されても追従します。

ちなみに 10em は font-size が 12px なら 120px となります。つまり font-size で指定されている大きさを 1 として計算されます。なのでユーザーにテキストサイズを変更されても追従する訳です。

次に dd の左にマージンを与え横並びにさせます。サンプルソースの赤い部分をご覧頂くと分かると思いますが、dt の width の値と dd の margin-left の値は同じ値にしておきます。

理由はテキストサイズをユーザーに変更された時にもレイアウトのバランスを保つ為です。異なる値だとテキストサイズの変更に比例しバランスも崩れて行きます。

上の方法は考え方も使用方法も簡単ですが float を使っているので、デザインによっては clear : left の必要性なども考慮しつつ使います。

もしも float なんか使いたくない！なんて気分の時は下のサンプルソースの様なネガティブマージンを使った方法もあります。

dl {
	line-height : 1.6em;
}

dt {
	width : 10em;
}

dd {
	margin-left : 10em;
	margin-top : -1.6em;
}

まず dl タグなど dt と dd に CSS の指定が継承されるセレクタで line-height を指定します。dt と dd に直接 line-height を指定しても良いですが、同じ値にします。

次に dt の width を指定し、先述した方法と同様に dd の左にマージンを与えます。左マージンの値は dt の width と同じ値です。

更に dt の横に並べる為に dd の上にネガティブマージン（マイナスの値を持ったマージン）を与えます。そのネガティブマージンの値は dt と dd に指定されている line-height の値と同じにします。

この方法も簡単なのですが、個人的に考え方が少々苦手なので、最近では float させる方法を良く使っています。でも、clear を考慮せず使える方法なので、この記事をご覧の方は気分でどうぞ。