最新情報や更新情報リスト

dlを使った最新情報リストのコードサンプル

<dl class="news_column">
<dt>2017.00.00</dt>
<dd><span class="category_01">カテゴリー1</span><a href="#">ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。</a></dd>
<dt>2014.9.15</dt>
<dd><span class="category_02">カテゴリー2</span><a href="#">ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。</a></dd>
<dt>2014.9.5</dt>
<dd><span class="category_03">カテゴリー3</span><a href="#">ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。</a></dd>
<dt>2014.9.3</dt>
<dd><span class="category_04">カテゴリー4</span><a href="#">ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。</a></dd>
<dt>2014.9.3</dt>
<dd><span class="category_05">カテゴリー5</span><a href="#">ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。ニュースが入ります。</a></dd>
</dl>
/* CSS */
dl.news_column{
    margin: 35px;
    padding:0;
    line-height:1.8;
}
dl.news_column dt{
	font-weight: normal;
    width:6em;
    float:left;
    margin:0;
    padding:.4rem 0 0 5px;
}
dl.news_column dd{
    position:relative;
    margin:0 0 10px;
    padding:0 5px 10px 13em;
    padding-bottom: 1rem;
    padding-top: .5rem;
    border-bottom:1px dotted #ccc;
    line-height: 145%;
}
dl.news_column dd:last-child{
	border-bottom: none;
}

span.category_01,
span.category_02,
span.category_03,
span.category_04,
span.category_05{
    display: block;
    position: absolute;
    top: 0;
    left: 6.5em;
    margin: 1em 1rem;
    margin-bottom: 0;
    margin-top: 0;
    padding: .3rem .5rem;
    border: 2px solid;
    border-radius: 6px;
    font-size: .8rem;
}