新着情報のコーディングサンプル(リスト or dl要素)

2014年10月17日(金)

newよくある、日付とタイトルが並ぶシンプルな新着情報。
いつも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しない場合の例にしてみた。
(ので、抜けてる記述あるかも…。)

そういえば、前に読んだ本には新着情報はテーブル要素で組むのが良いと書いてあったけど、テーブルで組んだことは無いなぁ。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このページのTOPへ戻る