html 更新情报のリスト[通常版]

Posted 2021-05-11

//dlを使う 一番シンプルで分かりやすい
/* CSS */
  dl.case1 {
    margin: 35px;
    padding: 0;
    line-height: 1.8;
    width: 50%;
  }
  dl.case1 dt {
    width: 6em;
    float: left;
    margin: 0;
    padding: 0 0 0 5px;
  }
  dl.case1 dd {
    margin: 0 0 10px;
    padding: 0 5px 10px 8em;
    border-bottom: 1px dotted #ccc;
  }
  
  <!-- HTML -->
  <dl class="case1">
    <dt>2014.3.18</dt>
    <dd>つれづれなるまゝに、日暮らし、硯にむかひて</dd>
    <dt>2014.2.15</dt>
    <dd>心にうつりゆくよしなし事を</dd>
    <dt>2014.1.5</dt>
    <dd>そこはかとなく書きつくれば</dd>
    <dt>2014.1.1</dt>
    <dd>あやしうこそものぐるほしけれ。</dd>
  </dl>