テーブルレイアウトをCSSとリストタグで実現するシンプルなコード

文章や画像を左右２つに分けてレイアウトする場合、
テーブルタグを使ってデザインすると楽だけど、なんとなく気持ち悪い。

あと個人的に、左に商品名を入れて右にその説明を入れる事が多いので、定義リスト（dl,dd,dtのリストタグ）でそれを表現すれば、タグ的に「左が定義・右がその説明」という事になるので、微々たるものだろうけどSEO的にも好ましいんじゃないだろうか、と考えた。

ということで、
今後のコピペ用に定義リストとスタイルシートでそれを実現したものを覚え書きとして残しておく事にする。

デモとコード１

まずはデモ。
一応レスポンシブデザインちっくにはなってると思われｗ

demo1

html

<dl class="dlist">
	<dt>いちじく</dt>
	<dd>いちじくの色は…<br>いちじくの形は…<br>いちじくの味は…</dd>
	<dt>人参</dt>
	<dd>人参の説明</dd>
	<dt>山椒</dt>
	<dd>山椒の説明</dd>
</dl>

CSS

.dlist{
	width:100%;
	border:1px solid #333;
	border-top:0;
}
.dlist dt,.dlist dd{
	padding:10px;
}
.dlist dt{
	width:30%;
	border-top:1px solid #333;
	float:left;
}
.dlist dd{
	border-top:1px solid #333;
	border-left:1px solid #333;
	overflow:hidden;
}

デモとコード２

そして、これをランキングっぽくするために、無理やりolリストタグっぽくしてみた。

demo2

CSS

.dlist{
	width:100%;
	border:1px solid #333;
	border-top:0;
	counter-reset:dno;
}
.dlist dt,.dlist dd{
	padding:10px;
}
.dlist dt{
	width:30%;
	border-top:1px solid #333;
	float:left;
}
.dlist dd{
	border-top:1px solid #333;
	border-left:1px solid #333;
	overflow:hidden;
}
.dlist dt{
	counter-increment: dno;
}
.dlist dt:before {
	content:counter(dno);
	background: url(oukan.gif);
	background-position: top center;
	display: inline-block;
	width:24px;
	text-align: center;
}

とりあえず、上記２つとも左側（dt）の縦幅が短い場合のCSSなので、右側（dd）の縦幅が短い場合はborderの上下左右を逆にしなきゃいけないので注意。