東京都府中市の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
  • このエントリーをはてなブックマークに追加

その他のリスト

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

要素一覧