サンプル

2007-05-30

テキストテキストテキストテキストテキストテキストテキストテキスト

2007-05-15

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

2007-04-30

テキストテキストテキストテキストテキストテキスト

2007-04-15

テキストテキストテキストテキストテキストテキストテキスト

2007-03-30

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ソース

XHTML
<dl class="list309">
  <dt>2007-05-30</dt>
  <dd>テキストテキスト......</dd>
  <dt>2007-05-15</dt>
  <dd>テキストテキスト......</dd>
  <dt>2007-04-30</dt>
  <dd>テキストテキスト......</dd>
  <dt>2007-04-15</dt>
  <dd>テキストテキスト......</dd>
  <dt>2007-03-30</dt>
  <dd>テキストテキスト......</dd>
</dl>

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