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

無難なリスト

  • 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

その他のリスト

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

要素一覧