日付とタイトルがある記事一覧の作り方

「マークアップ」の観点からすると、どうするのが正しい？

まず、結果どういう見た目のレイアウトになるかというところなんですが、下の図が前回も出てきたよくある「記事一覧」の図です。

表だからtableでしょう！の場合

2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル

…うん、まあまあですな。しかし、「記事一覧って表なの！？」という疑問が若干湧いてきます。
それと、なんとなくの最近の「脱table」みたいな風潮にも逆行している気もします。（私だけかもしれませんが…）

dl,dt,ddで組んだらtableじゃないし文句ないでしょ！の場合

2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル

たしかに「脱table」はできてますな。
で、そもそも「dl,dt,dd」ってどういう意図で使うんだっけ？？ってことなんですが、
dl はDefinition List（定義リスト）の略で、dt（Definition Term）で定義する用語を、dd（Definition Description）で説明するというのが、正しい使い方。
ふむ…この組み方だと「日付」の説明が「タイトル」になる。
そりゃーおかしいですね。

実は上記2パターンは「見た目（レイアウト）先行型」の組み方なんです。
簡単に言うと「こう見せたいからこの組み方をする」というやつですな。
それは正しいマークアップではありません。マークアップとはちゃんと文章（テキスト君）を構造化してあげるということ。テキスト君が間違ったタグで囲まれていると、いくらCSS先輩ががんばったところで、ただの「ダメなヤツら」というレッテルを貼られてしまいます。

結局こうしてみました

2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル
2014.10.16
タイトルタイトルタイトル

「日付」と「タイトル」をリストにして一覧で表示。これだと「マークアップ」の意味からするとそう間違っていない気がします。
実際に表示するとこんな感じになります。

はい、ここからはCSSです。HTMLとしてはこれでいいのであとは日付の下に落ちてしまったテキスト君（div）の見た目を揃える感じです。

ul li div {
	margin:-1.6em 0 0 7em;
}

CSS先輩「とりあえずdivはブロック要素にして下に落としておいて、margin-leftで左に日付分のスペースを確保して、margin-topで-1.6emとかその部分のテキストのline-height分だけ上げたらええやん？」とおっしゃってます。
マージンを「-」で取るいわゆる「ネガティブマージン」を使うところが、ポジティブ！
…はい。

marginの数値はpx（ピクセル）で具合を見ながら指定してもいいですが、文字を拡大して見ているユーザーのためにemにて指定するのがどちらかと言えばいい気がします。
こればっかりはサイトのデザインとか日付のテキストの大きさとか色々考慮しながらやるしかないですけど。

ということで、本日は意外とポジティブだったCSS先輩の「日付とタイトルがある記事一覧の作り方」でした。