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

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

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

注意する点

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

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

Case1）定義リストdlを使う

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

Case2）リストliを使う

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

Case3）段落pを使う

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

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

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

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

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

考察／まとめ

一番シンプルで分かりやすい組み方は Case1 ですね。
応用もしやすいし、動的出力にもしやすい組み方だと思います。

こんな感じで、コーディングの仕方が気になるデザインについてあれこれ考えていこうと思います。
「こういうのはどう組みます？」みたいな質問とかネタとかあったら是非ご連絡ください。Desicoネタでやりますので。