<DL><DT><DD>を表組み表示

DL定義リストをCSSでテーブルのような表組みにし、ボックスを横に並べる

野菜

ピーマン
ピーマンの説明文。
にんじん
にんじんの説明文。
キャベツ
キャベツの説明文。
レタス
レタスの説明文。

果物

りんご
リンゴの説明文。
みかん
みかんの説明文。
バナナ
バナナの説明文。
キュウイ
キュウイの説明文。
れもん
レモンの説明文。

コピペ用タグ


■HTMLタグ--------
<div class="list">
<h2>野菜</h2>
<dl>
<dt>ピーマン</dt>
<dd>ピーマンの説明文。</dd>
<dt>にんじん</dt>
<dd>にんじんの説明文。</dd>
<dt>キャベツ</dt>
<dd>キャベツの説明文。</dd>
<dt>レタス</dt>
<dd>レタスの説明文。</dd>
</dl>
</div> <div class="list">
<h2>果物</h2>
<dl>
<dt>りんご</dt>
<dd>リンゴの説明文。</dd>
<dt>みかん</dt>
<dd>みかんの説明文。</dd>
<dt>バナナ</dt> <dd>バナナの説明文。</dd> <dt>キュウイ</dt> <dd>キュウイの説明文。</dd>
<dt>れもん</dt>
<dd>レモンの説明文。</dd>
</dl>
</div>

■CSS------------
dl,dt,dd{
margin: 0;
padding: 0;
} .list{ width: 200px; display: block; border: 1px solid #333333; margin: 5px; float: left; } .list h2{ color: #FFFFFF; background-color: #333333; padding: 4px; margin: 0px; font-size: 115%; text-align: center; } .list dt, .list dd{ padding: 5px 4px 5px 4px; } .list dt { width: 50px; clear: left; float: left; color: #333333; background-color: #CCCCCC; border-top: 1px solid #333333; border-right: 1px solid #333333; } .list dd { margin-left: 58px; border-top: 1px solid #333333; border-left: 1px solid #333333; }

<DD>が2行を想定&横幅いっぱいに

高さを指定し、ネガティブマージンを使用。

お肉

牛肉
牛肉の説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
豚肉
豚肉の説明文。。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
鶏肉
鶏肉の説明文。

DD2行のコピペ用タグ


■HTMLタグ--------


<div class="list2">
<h2>お肉</h2>
<dl>
<dt>牛肉</dt>
<dd>牛肉の説明文。</dd>
<dt>豚肉</dt>
<dd>豚肉の説明文。</dd>
<dt>鶏肉</dt>
<dd>鶏肉の説明文。</dd>
</dl>
</div>

■CSS------------
dl,dt,dd{
	margin: 0;
	padding: 0;
}
.list2{
	display: block;
	border: 1px solid #333333;
	width: 100%;
	margin: 10px 0 10px 0;
}
.list2 h2{
	color: #FFFFFF;
	background-color: #333333;
	padding: 4px;
	margin: 0px;
	font-size: 115%;
	text-align: center;
}
.list2 dt, .list2 dd{
	height: 35px;
	padding: 5px 4px 5px 4px;
}
.list2 dt {
	width: 60px;
	color: #333333;
	background-color: #CCCCCC;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
}
.list2 dd {
	margin-top: -46px;
	margin-left: 68px;
	border-top: 1px solid #333333;
	border-left: 1px solid #333333;
}

メモ