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

マテリアルなニュースリスト

  • RESULT
  • HTML
  • CSS
  • コピー
    <ul class="msr_newslist03">
      <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_newslist03 {
      width: 100%;
    }
    .msr_newslist03 li {
      background-color: #F8F8F8;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      font-size: 88%;
      margin-bottom: 2px;
    }
    .msr_newslist03 li a {
      box-sizing: border-box;
      color: #000000;
      display: table;
      padding: 15px;
      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_newslist03 li a:hover {
      background: #FFFFFF;
      text-decoration: none;
    }
    .msr_newslist03 li div {
      display: table-cell;
      width: 144px;
    }
    .msr_newslist03 li p {
      display: table-cell;
      padding-left: 20px;
      vertical-align: middle;
    }
    
    /* 時間の設定 */
    .msr_newslist03 li time {
      color: #1B73BA;
      display: table-cell;
      vertical-align: top;
      width: 90px;
    }
    
    /* カテゴリの設定 */
    .msr_newslist03 li .cat01,
    .msr_newslist03 li .cat02 {
      background-color: #1B73BA;
      border-radius: 1px;
      color: #FFFFFF;
      font-size: 9px;
      padding: 0 2px;
      text-align: center;
      width: 50px;
    }
    .msr_newslist03 li .cat02 {
      background-color: #0E3A5F;
    }
    

検証済みブラウザ

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

その他のリスト

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

要素一覧