dtタグとddタグを使ったリストを作ってみる。

ちょうど求人・転職情報等に使っているレイアウトですが、CSS関連の記事を書いておられるサイトのCSSを利用させて頂きました。

dtタグやddタグは余り使った事がなかったんですが、そういえば比較的見かけるレイアウトですね。overflowを設定したdivと合わせワザで使用すると履歴系のリストに使えるのではと思います。

見出し部分の色を変更すると印象が変わりますね。

2010/01/01

2010版メモの整理レイアウト変更

dl.list309 dt {
  clear: left;
  float: left;
  margin: 0 0 0.8em;
  width: 7.5em;
  border-left: solid 8px #CCC;
  padding-left: 5px;
  color: #000;
}

dl.list309 dd {
  margin-bottom: 0.8em;
  margin-left: 7.5em;
}