更新情報などのリストの組み方、どうしてます？

新しいコンテンツとして、こういうデザインのとき、どうやってコーディングするのか？というのを考えるカテゴリ「Desico」を作ってみました。
Design + Coding = Desico ってことです。
本当は別サイト立ち上げてやろうかなーと思ったんですが、続くかどうか分からないので…ｗとりあえずブログでやってみます。

最初はサイトではよくある更新情報のリスト。
どんな組み方があるんでしょうか？

［Ad］

Contents

注意する点
Case1）定義リストdlを使う
Case2）リストliを使う
Case3）段落pを使う
Case4）日付の他にカテゴリとか付ける場合
考察／まとめ

注意する点

更新情報のリストなので「繰り返し」がポイントですね。php等で動的に出力する場合もあります。
また、日付部分は文字列数が変わらない場合が多いですが、タイトル部分は毎回文字数が変わります。
文字数が多くて２行（もしくはそれ以上）になる場合もあるかもしれません。

その点を注意して考えてみます。

Case1）定義リストdlを使う

<!-- HTML -->
<dl class="case1">
<dt>2014.9.18</dt>
<dd>更新情報などのリストの組み方、どうしてます？</dd>
<dt>2014.9.15</dt>
<dd>保育士さんの寝かしつけ技「すーすーねんね」がスゴかった話</dd>
<dt>2014.9.5</dt>
<dd>上京して一番の衝撃は醤油が辛かった事です</dd>
<dt>2014.9.3</dt>
<dd>アナフィラキシーで救急車に乗った話（2014.9.14追記）</dd>
</dl>

/* CSS */
dl.case1{
	margin:35px;
	padding:0;
	line-height:1.8;
	width:50%;
}
dl.case1 dt{
	width:6em;
	float:left;
	margin:0;
	padding:0 0 0 5px;
}
dl.case1 dd{
	margin:0 0 10px;
	padding:0 5px 10px 8em;
	border-bottom:1px dotted #ccc;
}

floatを使った、たぶん一番ベーシックなやり方だと思います。
dtのwidthとddのpadding-leftにemを使うと、文字サイズだけが変わった時に崩れにくくなります。

Case2）リストliを使う

<!-- HTML -->
<ul>
<li><span class="date">2014.9.18</span>更新情報などのリストの組み方、どうしてます？</li>
<li><span class="date">2014.9.15</span>保育士さんの寝かしつけ技「すーすーねんね」がスゴかった話</li>
<li><span class="date">2014.9.5</span>上京して一番の衝撃は醤油が辛かった事です</li>
<li><span class="date">2014.9.3</span>アナフィラキシーで救急車に乗った話（2014.9.14追記）</li>
</ul>

/* CSS */
ul{
	margin:35px;
	padding:0;
	line-height:1.8;
	width:50%;
	list-style:none;
}
ul li{
	position:relative;
	margin:0 0 10px;
	padding:0 5px 10px 8em;
	border-bottom:1px dotted #ccc;
}
ul li span.date{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:6em;
	margin:0;
	padding:0 0 0 5px;
}

position:absoluteを使ったやり方です。
positionの性質をきちんと把握して使わないと崩れてしまうかもしれません。

Case3）段落pを使う

<!-- HTML -->
<div class="case3">
<p><span class="date">2014.9.18</span><span class="title">更新情報などのリストの組み方、どうしてます？</span></p>
<p><span class="date">2014.9.15</span><span class="title">保育士さんの寝かしつけ技「すーすーねんね」がスゴかった話</span></p>
<p><span class="date">2014.9.5</span><span class="title">上京して一番の衝撃は醤油が辛かった事です</span></p>
<p><span class="date">2014.9.3</span><span class="title">アナフィラキシーで救急車に乗った話（2014.9.14追記）</span></p>
</div>

/* CSS */
div.case3{
	margin:35px;
	padding:0;
	line-height:1.8;
	width:50%;
}
div.case3 p{
	display:table;
	margin:0 0 10px;
	padding:0 0 10px;
	border-bottom:1px dotted #ccc;
	width:100%;
}
div.case3 p span.date{
	display:table-cell;
	width:8em;
	padding:0 0 0 5px;
}
div.case3 p span.title{
	display:table-cell;
	padding:0 5px 0 0;
}

奇を衒ったやりかた考えたらこんなのが出来ました。
普通はこんな組み方しないと思います。
たんにdisplay:tableが使いたかっただけです…。

Case4）日付の他にカテゴリとか付ける場合

こんな感じのです。コーポレートサイトなんかでたまに見かけます。

<!-- HTML -->
<dl class="case4">
<dt>2014.9.18</dt>
<dd><span class="cat">Desico</span> 更新情報などのリストの組み方、どうしてます？</dd>
<dt>2014.9.15</dt>
<dd><span class="cat">Life</span> 保育士さんの寝かしつけ技「すーすーねんね」がスゴかった話</dd>
<dt>2014.9.5</dt>
<dd><span class="cat">Food</span> 上京して一番の衝撃は醤油が辛かった事です</dd>
<dt>2014.9.3</dt>
<dd><span class="cat">Memo</span> アナフィラキシーで救急車に乗った話（2014.9.14追記）</dd>
</dl>

/* CSS */
dl.case4{
	margin:35px;
	padding:0;
	line-height:1.8;
	width:50%;
}
dl.case4 dt{
	width:6em;
	float:left;
	margin:0;
	padding:0 0 0 5px;
}
dl.case4 dd{
	position:relative;
	margin:0 0 10px;
	padding:0 5px 10px 13em;
	border-bottom:1px dotted #ccc;
}
dl.case4 dd span.cat{
	display:block;
	position:absolute;
	top:0;
	left:7em;
	width:4.5em;
	margin:0;
	padding:0;
	text-align:center;
	background-color:#eee;
	border-radius:2px;
}

case1とcase2を合わせた感じのやり方です。
他によい組み方があれば教えてください。

上記のサンプルは以下に書いてあります。
表示とソースを見比べてみてくださいね。
・Desico : 更新情報リスト : SAMPLE