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

2014年10月17日(金)

newよくある、日付とタイトルが並ぶシンプルな新着情報。
いつもul liだったっけ、dl dt ddだったっけと迷うけど、今のスタンダードって何なんでしょう?
画像付きとかだったらdivとかpとかでごにょごにょするけど、まぁ、

シンプルな新着情報のコードは、リストかdl要素かどっちかで良いんじゃないか

と思うのでメモメモ。

1)リストタグ使用の場合

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>

css例

ul.info li span.date {
    display: block;
    float: left;
}
ul.info li a {
    display: block;
    overflow: auto;
}

日付の下にタイトルが周り込まないようにするにはこんな感じでoverflow: auto。
タイトルからリンク貼ってない(aタグが無い)場合は、タイトルもspanに適当なclass付けて囲めば指定できる。(ちょっと格好悪いけど…。)

2)dl タグの場合

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>

css例

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;
}

なんとなくdtをfloatしない場合の例にしてみた。
(ので、抜けてる記述あるかも…。)

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

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

コメントを残す

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

このページのTOPへ戻る