html 更新情报のリスト[カテゴリ付き]

Posted 2021-05-11

//日付の他にカテゴリを付ける
/* CSS */
  dl.case4{
    margin:35px;
    padding:0;
    line-height:1.8;
    width:50%;
}
dl.case4 dt{
    width:6em;
    float:left;
    margin:0;
    padding:0 0 0 5px;
}
dl.case4 dd{
    position:relative;
    margin:0 0 10px;
    padding:0 5px 10px 13em;
    border-bottom:1px dotted #ccc;
}
dl.case4 dd span.cat{
    display:block;
    position:absolute;
    top:0;
    left:7em;
    width:4.5em;
    margin:0;
    padding:0;
    text-align:center;
    background-color:#eee;
    border-radius:2px;
}

<!-- HTML -->
<dl class="case4">
<dt>2014.3.18</dt>
<dd><span class="cat">cat1</span> つれづれなるまゝに、日暮らし、硯にむかひて</dd>
<dt>2014.2.15</dt>
<dd><span class="cat">cat2</span> 心にうつりゆくよしなし事を</dd>
<dt>2014.1.5</dt>
<dd><span class="cat">cat2</span> そこはかとなく書きつくれば</dd>
<dt>2014.1.1</dt>
<dd><span class="cat">cat3</span> あやしうこそものぐるほしけれ。</dd>
</dl>