dt ddを使って、新着情報や更新情報の表示部分を作る

どんなサイトを作っていても、必ず使うのが新着情報や更新情報などを載せる部分。

通常トップページにあると思いますが、これらをマークアップする時にdt ddを使ってデザインする方法があるのですが、どうも今までのやり方だと気に入らない部分があって、liなんかを使って作る場合もあったのですが、今日この記事をみて目から鱗が落ちました。

dtをfloatする場合の注意点

今度からこれを使おうと決めたので、メモ。

<dl>
  <dt>2008-05-13</dt>
  <dd>ホームページを更新しました。</dd>
  <dt>2008-05-13</dt>
  <dd>ホームページを更新しました。</dd>
  <dt>2008-05-13</dt>
  <dd>ホームページを更新しました。<br />
  ホームページを更新しました。ホームページを更新しました。<br />
  ホームページを更新しました。</dd>
  <dt>2008-05-13</dt>
  <dd>ホームページを更新しました。</dd>
  <dt>2008-05-13</dt>
  <dd>ホームページを更新しました。</dd>
</dl>

HTMLはこんな感じです。

これに以下のCSSを当ててあげます。

dt {
  clear: left;
  float: left;
  width: 7em;
  padding: 10px 0.5em;
}

dd {
  margin-left: 0;
  padding: 10px 0.5em 10px 8em;
  border-bottom: dotted 1px #CCC;
}

横方向の指定にemを使うって部分と、ddにborder指定をして、文字のスペースをpaddingで取るって所で目から鱗が落ちました。

ステキです。

HTMLとCSSは今までの経験で書いてきた範囲でなんとかなってる部分が多いので、最近新しい発見って中々無いのですが、やっぱりまだまだ勉強が足りませんね。精進しよっと。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。