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

コミック風のニュースリスト

  • RESULT
  • HTML
  • CSS
  • コピー
    <ul class="msr_newslist04">
      <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_newslist04 {
      border-top: 5px solid #000000;
      width: 100%;
      margin-top: 10px;
    }
    .msr_newslist04 li {
      border-bottom: 1px solid #000000;
      font-size: 14px;
    }
    .msr_newslist04 li a {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #000000;
      display: table;
      padding: 20px;
      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_newslist04 li a:hover {
      text-decoration: none;
      background: #EEEEEE;
    }
    .msr_newslist04 li div {
      padding-bottom: 10px;
      width: 144px;
    }
    .msr_newslist04 li p {
      vertical-align: middle;
    }
    /* 時間の設定 */
    .msr_newslist04 li time {
      display: table-cell;
      vertical-align: top;
      width: 90px;
    }
    /* カテゴリの設定 */
    .msr_newslist04 li .cat01, .msr_newslist04 li .cat02 {
      background-color: #000000;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      display: table-cell;
      color: #FFFFFF;
      font-size: 10px;
      padding: 0 2px;
      text-align: center;
      width: 50px;
    }
    .msr_newslist04 li .cat02 {
      background-color: #FFFFFF;
      border: 1px solid #000000;
      box-sizing: border-box;
      color: #000000;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • このエントリーをはてなブックマークに追加

その他のリスト

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

要素一覧