東京都府中市のWEB制作会社Maromaroのブログです

スタイリッシュなニュースリスト

  • RESULT
  • HTML
  • CSS
  • コピー
    <ul class="msr_newslist05">
      <li>
        <a href="#">
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat">Category</p>
          <p class="ttl">テキストテキスト</p>
        </a>
      </li>
      <li>
        <a href="#">
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat">Category</p>
          <p class="ttl">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </a>
      </li>
      <li>
        <a href="#">
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat">Category</p>
          <p class="ttl">テキストテキスト</p>
        </a>
      </li>
      <li>
        <a href="#">
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat">Category</p>
          <p class="ttl">テキストテキスト</p>
        </a>
      </li>
    </ul>
  • コピー
    .msr_newslist05 {
      background-color: #FFFFFF;
      border-top:1px solid #999999;
      width: 100%;
    }
    .msr_newslist05 li {
      border-bottom:1px solid #999999;
      font-size: 14px;
    }
    .msr_newslist05 li a {
      box-sizing: border-box;
      color: #333333;
      display: table;
      text-decoration: none;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
      width: 100%;
    }
    .msr_newslist05 li a:hover {
      background: #EEEEEE;
      text-decoration: none;
    }
    .msr_newslist05 li time {
      border-right:1px solid #999999;
      display: table-cell;
      padding: 16px;
      text-align:center;
      vertical-align: middle;
      width:14%;
    }
    .msr_newslist05 li .cat {
      border-right:1px solid #999999;
      display: table-cell;
      padding: 16px;
      text-align:center;
      vertical-align: middle;
      width:18%;
    }
    .msr_newslist05 li .ttl {
      display: table-cell;
      padding: 16px;
      vertical-align: middle;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

その他のリスト

  1. list
  2. list
  3. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
丸カッコ番号付きのリスト
リストの一覧をもっと見る

要素一覧