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

No Photo

使える 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でインデントを調整します。
[ IE での注意点 ]
hasLayout が true になっている場合、dd の margin、padding、また background が正しく表示できません。
zoom:normal; などを設定して hasLayout の値を false にしておく必要があります。

ページの先頭へ

グラフィカルなテーブル

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

[サンプル]

ミスター・ブルー
エディ・バンカー
ミスター・オレンジ
ティム・ロス
ミスター・ピンク
スティーヴ・ブシェミー
ミスター・ブラウン
クエンティン・タランティーノ

[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)」です。お楽しみに!

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ