新着情報のコーディングサンプル（リスト or dl要素）
2014年10月17日（金）
よくある、日付とタイトルが並ぶシンプルな新着情報。
いつもul liだったっけ、dl dt ddだったっけと迷うけど、今のスタンダードって何なんでしょう？
画像付きとかだったらdivとかpとかでごにょごにょするけど、まぁ、
シンプルな新着情報のコードは、リストかdl要素かどっちかで良いんじゃないか
と思うのでメモメモ。
1）リストタグ使用の場合
html例
[html]
<h3>新着情報</h3>
<ul class="info">
<li><span class="date">2014年10月1日</span><a href="#">新着情報タイトル</a></li>
<li><span class="date">2014年10月1日</span><a href="#">新着情報タイトル</a></li>
<li><span class="date">2014年10月1日</span><a href="#">新着情報タイトル</a></li>
</ul>
[/html]
css例
[html]
ul.info li span.date {
display: block;
float: left;
}
ul.info li a {
display: block;
overflow: auto;
}
[/html]
日付の下にタイトルが周り込まないようにするにはこんな感じでoverflow: auto。
タイトルからリンク貼ってない（aタグが無い）場合は、タイトルもspanに適当なclass付けて囲めば指定できる。（ちょっと格好悪いけど…。）
2）dl タグの場合
html例
[html]
<dl class="info">
<dt>2014年10月1日</dt>
<dd><a href="#">新着情報タイトル</a></dd>
<dt>2014年10月1日</dt>
<dd><a href="#">新着情報タイトル</a></dd>
<dt>2014年10月1日</dt>
<dd><a href="#">新着情報タイトル</a></dd>
</dl>
[/html]
css例
[html]
dl.info {
border-top: 1px solid #ccc;
}
dl.info dt {
margin: 10px 0 0 0;
font-weight: bold;
}
dl.info dd {
margin: -2em 0 0 0;
padding: 0 0 10px 6em;
border-bottom: 1px solid #ccc;
}
dl.info dd a {
display: inline-block;
}
[/html]
なんとなくdtをfloatしない場合の例にしてみた。
（ので、抜けてる記述あるかも…。）
そういえば、前に読んだ本には新着情報はテーブル要素で組むのが良いと書いてあったけど、テーブルで組んだことは無いなぁ。
