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

フラットなニュースリスト

  • RESULT
  • HTML
  • CSS
  • コピー
    <ul class="msr_newslist02">
      <li>
        <a href="#">
        <div>
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat01">cat01</p>
        </div>
        <p> テキストテキスト </p>
        </a>
      </li>
      <li>
        <a href="#">
        <div>
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat02">cat02</p>
        </div>
        <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p>
        </a>
      </li>
      <li>
        <a href="#">
        <div>
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat01">cat01</p>
        </div>
        <p> テキストテキスト </p>
        </a>
      </li>
      <li>
        <a href="#">
        <div>
          <time datetime="2016-1-1">2016.01.01</time>
          <p class="cat02">cat02</p>
        </div>
        <p> テキストテキスト </p>
        </a>
      </li>
    </ul>
  • コピー
    .msr_newslist02 {
      width: 100%;
    }
    .msr_newslist02 li {
      font-size: 14px;
      background-color: #F3F3F3;
    }
    .msr_newslist02 li:nth-child(odd) {
      background-color: #E6E6E6;
    }
    .msr_newslist02 li a {
      box-sizing: border-box;
      color: #000000;
      display: table;
      padding: 10px;
      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_newslist02 li a:hover {
      text-decoration: none;
      background-color: #FDFDFD;
    }
    
    .msr_newslist02 li div {
      display: table-cell;
      width: 144px;
    }
    .msr_newslist02 li p {
      display: table-cell;
      padding-left: 20px;
      vertical-align: middle;
    }
    
    /* 時間の設定 */
    .msr_newslist02 li time {
      display: table-cell;
      vertical-align: top;
      width: 90px;
    }
    
    /* カテゴリの設定 */
    .msr_newslist02 li .cat01,
    .msr_newslist02 li .cat02 {
      background-color: #1B73BA;
      border-radius: 1px;
      color: #FFFFFF;
      font-size: 9px;
      padding: 0 2px;
      text-align: center;
      width: 50px;
    }
    .msr_newslist02 li .cat02 {
      background-color: #0E3A5F;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

その他のリスト

リストの一覧をもっと見る

要素一覧