[使える CSS テクニック] CSS で DL を float して表組みのように表現する

使える CSS テクニック第 5 回、「CSS で DL を float して表組みのように表現する」です。

何かと便利な定義リストですが、今回は dt と dd を並列に並べて、テーブルのように表示する方法をご紹介します。
よく使われる定番の方法で、難しいものではないですが、少しだけクセがあります。

ベーシックなテーブル

まずは下のような、会社紹介などに使われる汎用的なテーブルです。
基本的に dt に float を設定して、dd は dt に乗っかる形になります。

[サンプル]

会社名

株式会社シーブレイン

住所

横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F

電話番号

045-650-6210

[HTML]

<dl>
<dt>会社名</dt>
<dd>株式会社シーブレイン</dd>
<dt>住所</dt>
<dd>横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F</dd>
<dt>電話番号</dt>
<dd>045-650-6210</dd>
</dl>

[CSS]

dl {
	margin: 0 0 15px;
	padding: 0 10px 10px;
	border: 7px #EEEEEE solid;
}
dl dt {
	float: left;
	width: 7em;
	padding: 10px 0;
	font-weight: bold;
	text-indent: 1em;
	line-height: 150%;
}
dl dd {
	padding: 10px 0 10px 7em;
	line-height: 150%;
	border-bottom: 1px #CCCCCC solid;
}

• ポイント

1. dt には float:left; を指定し、dd には padding-left に dt の width以上の値を設定します。
2. dt には width を指定する必要があるため、padding で左右余白の調節できません。
   text-indentでインデントを調整します。

グラフィカルなテーブル

さらに細かく指定すれば、グラフィカルな表現も可能です。

[サンプル]

ミスター・ブルー

エディ・バンカー

ミスター・オレンジ

ティム・ロス

ミスター・ピンク

スティーヴ・ブシェミー

ミスター・ブラウン

クエンティン・タランティーノ

[HTML]

<dl>
<dt id="blue">ミスター・ブルー</dt>
<dd>エディ・バンカー</dd>
<dt id="orange">ミスター・オレンジ</dt>
<dd>ティム・ロス</dd>
<dt id="pink">ミスター・ピンク</dt>
<dd>スティーヴ・ブシェミー</dd>
<dt id="brown">ミスター・ブラウン</dt>
<dd>クエンティン・タランティーノ</dd>
</dl>

[CSS]

dl {
	padding: 20px;
	background: url(img/bg_dl.gif) no-repeat 0 0;
}
dl dt {
	float: left;
	width: 140px;
	margin-bottom: 10px;
	padding: 10px 0;
	font-weight: bold;
	color: #FFFFFF;
	text-indent: 1em;
	line-height: 150%;
	background-position: 0 0;
	background-repeat: no-repeat;
}
dl dd {
	margin-left: 140px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #666666;
	padding: 10px 0;
	text-indent: 1em;
	line-height: 150%;
	background: url(img/bg_dd.gif) no-repeat 0 0;
}

/* 背景イメージ設定 */
dl dt#blue {
	background-image: url(img/bg_dt_blue.gif);
}
dl dt#orange {
	background-image: url(img/bg_dt_orange.gif);
}
dl dt#pink {
	background-image: url(img/bg_dt_pink.gif);
}
dl dt#brown {
	background-image: url(img/bg_dt_brown.gif);
}

定義リストをフラットに並べて表示する方法は、表組み以外でも、ニュースリリースや更新履歴のパーツ等いろいろと利用できます。
数種類のパターンを用意しておけば、様々な箇所で役に立つでしょう。

次回は「第 6 回 CSS を使った見栄えの良い表組み（table）」です。お楽しみに！