2008/05/13 by ゴウ
dt ddを使って、新着情報や更新情報の表示部分を作る
どんなサイトを作っていても、必ず使うのが新着情報や更新情報などを載せる部分。
通常トップページにあると思いますが、これらをマークアップする時にdt ddを使ってデザインする方法があるのですが、どうも今までのやり方だと気に入らない部分があって、liなんかを使って作る場合もあったのですが、今日この記事をみて目から鱗が落ちました。
今度からこれを使おうと決めたので、メモ。
HTMLはこんな感じです。
これに以下のCSSを当ててあげます。
横方向の指定にemを使うって部分と、ddにborder指定をして、文字のスペースをpaddingで取るって所で目から鱗が落ちました。
ステキです。
HTMLとCSSは今までの経験で書いてきた範囲でなんとかなってる部分が多いので、最近新しい発見って中々無いのですが、やっぱりまだまだ勉強が足りませんね。精進しよっと。