リストの点の色を変える方法【CSS】

リストの点の変更のアイキャッチ
こばゆた
こばゆた

以下の様にリストの先頭に付く点(リストマーカー)に色を付けたい時があるかもしれません

  • リスト
  • リスト
  • リスト

そんな時のメモです。

またリスト関連の記事はコチラになります↓

スポンサーリンク

1.リストに色を付ける

1-1.パターン1 spanタグを使う

  • STEP1
    リストを作成する

    <ul>
      <li>リスト</li>
      <li>リスト</li>
      <li>リスト</li>
    </ul>
    • リスト
    • リスト
    • リスト

  • STEP2
    liタグの中にspanタグを入れる

    <ul>
      <li><span>リスト</span></li> <!--<span>を入れる-->
      <li><span>リスト</span></li>
      <li><span>リスト</span></li>
    </ul>

  • STEP3
    リストに色を付ける
    まずリスト全体にマーカーに設定したい色を設定します。

    ul{
     color: blue; /* リストマーカーの色を指定 */
    }
    • リスト
    • リスト
    • リスト

  • STEP4
    spanタグに色を付ける
    文字色に設定した色に戻せば完成です。

    ul{
     color: blue; /*リストマーカーの色を指定*/
    }
    
    span{
     color: #333; /* リストの色を指定 */
    }
    • リスト
    • リスト
    • リスト

1-2.パターン2 疑似要素で作成する

  • STEP1
    リストを作成する

    <ul>
      <li>リスト</li>
      <li>リスト</li>
      <li>リスト</li>
    </ul>
    • リスト
    • リスト
    • リスト

  • STEP2
    リストマーカーを消す
    list-style: none;で普通に消します。

    ul{
     list-style: none;
    }
    • リスト
    • リスト
    • リスト

  • STEP3
    疑似要素でリストの前にマーカーを挿入する
    疑似要素を使ってマーカーを表示します。
    またliをdisplay: flexにすることでリストマーカーとリストの本文の高さを合わせています。

    ul{
     list-style: none;
    }
    
    li{
      display: flex; /* 点とリストを横並びに */
      align-items: center; /* 垂直方向に中央揃い */
    }
    
    li::before{
     content: "⚫︎"; /* 記号(黒丸)を挿入 */
     color: blue; /* 好きな色にする */
     font-size: 0.6em; /* 黒丸の大きさに差異があるので調整 */
     margin-right: 1em; /* 余白 */
    }
    • リスト
    • リスト
    • リスト

    完成です。

ちなみに疑似要素の中身をハートにすればかわいいリストにもなります。

ul{
 list-style: none;
}

li{
  display: flex; /* 点とリストを横並びに */
  align-items: center; /* 垂直方向に中央揃い */
}

li::before{
  content: "❤︎";
  color: #f67690;
  font-size: 1.5em; 
  margin-right: 0.25em;
}
  • リスト
  • リスト
  • リスト

コメント