東京都府中市のWeb制作会社が運営するブログです。

リスト

リストのデザインテンプレート一覧です。

丸カッコ番号付きのリスト

  • RESULT
  • HTML
  • CSS
    1. list
    2. list
    3. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • コピー
    <div class="msr_list07">
      <ol>
        <li>list</li>
        <li>list</li>
        <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ol>
    </div>
  • コピー
    .msr_list07 ol {
      padding-left:2.5em;
      line-height: 150%;
      padding-bottom: 15px;
      list-style: none;
      counter-reset: ol_li;
    }
    .msr_list07 ol > li{
      margin-bottom:10px;
      list-style-type:none;
      position:relative;
    }
    .msr_list07 ol > li::before{
      counter-increment: ol_li;
      content: "("counter(ol_li)")";
      color:#FF4A15;
      display:block;
      position:absolute;
      left:-2.5em;
      top:1px;
    }
    .msr_list07 li ul,
    .msr_list07 li ol{
      margin-top:5px;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

フラットなアンカーリンクリスト

  • RESULT
  • HTML
  • CSS
  • コピー
    <ul class="msr_list06 clearfix">
      <li><a href="#">button01</a></li>
      <li><a href="#">button01</a></li>
      <li><a href="#">button01</a></li>
    </ul>
  • コピー
    .msr_list06{
      margin:0 -10px;
    }
    .msr_list06 li{
      width:33.3%;
      padding:0 10px;
      display:inline-block;
      float:left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .msr_list06 li a{
      width:100%;
      padding:18px 0;
      color:#fff;
      font-size:16px;
      background:#1B73BA;
      border:2px solid #1B73BA;
      text-decoration:none;
      text-align:center;
      display:block;
      position:relative;
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
    }
    .msr_list06 li a::after{
      content: '';
      width: 6px;
      height: 6px;
      border: 0px;
      border-bottom: solid 2px #fff;
      border-right: solid 2px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      bottom: 8px;
      left: 50%;
      margin-left: -3px;
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
    }
    .msr_list06 li a:hover{
      background:#fff;
      color:#1B73BA;
    }
    .msr_list06 li a:hover::after{
      border-bottom: solid 2px #1B73BA;
      border-right: solid 2px #1B73BA;
    }

検証済みブラウザ

  • IE10
  • Edge
  • FF
  • chrome
  • Safari

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

  • 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

スタイリッシュなリスト

  • RESULT
  • HTML
  • CSS
    • list
    • list
    • list
  • コピー
    <ul class="msr_list05">
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
  • コピー
    .msr_list05 li {
      font-size: 16px;
      padding: 0 0 8px 20px;
      position:relative;
    }
    /* アイコン */
    .msr_list05 li:before {
      border-bottom:1px solid #999999;
      content: "";
      height: 1;
      left:0;
      margin: 0 10px 2px 0;
      position:absolute;
      top:9px;
      vertical-align: middle;
      width: 10px;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

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

  • 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

コミック風のリスト

  • RESULT
  • HTML
  • CSS
    • list
    • list
    • list
  • コピー
    <ul class="msr_list04">
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
    
  • コピー
    .msr_list04 li {
      font-size: 13px;
      padding-bottom: 5px;
    }
    .msr_list04 li:before {
      background: #000000;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      content: "";
      display: inline-block;
      margin-right: 5px;
      width: 10px;
      height: 10px;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome

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

  • 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

マテリアルなリスト

  • RESULT
  • HTML
  • CSS
    • list
    • list
    • list
  • コピー
    <ul class="msr_list03">
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
  • コピー
    .msr_list03 li {
      font-size: 13px;
      padding-bottom: 5px;
    }
    
    /* アイコン */
    .msr_list03 li:before {
      background-color: #1B73BA;
      border-radius: 50%;
      content: "";
      display: inline-block;
     *display:inline;
     *zoom:1;
      height: 10px;
      margin: 0 10px 2px 0;
      vertical-align: middle;
      width: 10px;
    }

検証済みブラウザ

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

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

  • 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

フラットなリスト

  • RESULT
  • HTML
  • CSS
    • list
    • list
    • list
  • コピー
    <ul class="msr_list02">
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
  • コピー
    .msr_list02 li {
      font-size: 13px;
      padding-bottom: 5px;
    }
    
    /* アイコン */
    .msr_list02 li:before {
      background-color: #1B73BA;
      content: "";
      display: inline-block;
      height: 8px;
      margin-right: 10px;
      transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      width: 8px;
    }

検証済みブラウザ

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

無難なニュースリスト

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

検証済みブラウザ

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

無難なリスト

  • RESULT
  • HTML
  • CSS
    • list
    • list
    • list
  • コピー
    <ul class="msr_list01">
      <li><span></span>list</li>
      <li><span></span>list</li>
      <li><span></span>list</li>
    </ul>
  • コピー
    .msr_list01 li {
      font-size: 13px;
      padding-bottom: 5px;
    }
    .msr_list01 li:last-child {
      padding-bottom: 0;
    }
    
    /* アイコン(丸の箇所) */
    .msr_list01 li span {
      background-color: #AAAAAA;
      border-radius: 50%;
      box-sizing: border-box;
      display: inline-block;
    *display:inline;
    *zoom:1;
      height: 10px;
      margin: 0 10px 3px 0;
      position: relative;
      vertical-align: middle;
      width: 10px;
    }
    
    /* アイコン(三角の箇所) */
    .msr_list01 li span:before {
      border-bottom: 3px solid transparent;
      border-left: 3px solid #FFF;
      border-right: 3px solid transparent;
      border-top: 3px solid transparent;
      content: "";
      display: block;
      left: 4px;
      position: absolute;
      top: 2px;
    }

検証済みブラウザ

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