CSS Tips:dlリストで年表を作ってみる

2010年
5月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
11月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
2011年
2月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
4月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
2012年
2月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
10月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
2013年
5月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
11月 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

HTML

<dl class="glossary">

<dt>2010年</dt>
<dd><span class="shatai-gray">5月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dd><span class="shatai-gray">11月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>

<dt>2011年</dt>
<dd><span class="shatai-gray">2月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dd><span class="shatai-gray">4月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>

<dt>2012年</dt>
<dd><span class="shatai-gray">2月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dd><span class="shatai-gray">10月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>

<dt>2013年</dt>
<dd><span class="shatai-gray">5月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
<dd><span class="shatai-gray">11月</span> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>

</dl>

CSS

dl.glossary {
    margin: 10px auto;
    overflow: hidden;
    position: relative;
}
dl.glossary dt {
    float: left;
    width: 10%;
    clear: both;
    padding: 3px 2% 15px 0;
    position: relative;
}
dl.glossary dd {
    float: right;
    width: 85%;
    padding: 3px 0 15px 3%;
}
dl.glossary:before {
    content: "";
    width: 1px;
    position: absolute;
    border-left: 1px solid #999;
    top: 0;
    bottom: 0;
    left: 12%;
}
dl.glossary dt:before {
    content: "";
    width: 60px;
    position: absolute;
    border-top: 1px solid #999;
    top: -6px;
    right: -30px;
}
dl.glossary dt:after {
  content: "";
  width: 6px;
  height: 6px;
  background: #333;
  border: 1px solid #999;
  position: absolute;
  border-radius: 6px;
  top: -9px;
  right: -17px;
}
span.shatai-gray {
    font-family: serif;
    color: #666666 !important;
    font-wight: bold;
    font-style: italic;
}