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

こばゆた

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

リスト
リスト
リスト

そんな時のメモです。

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

今回の内容

1.リストに色を付ける
- 1-1.パターン１ spanタグを使う
- 1-2.パターン2 疑似要素で作成する

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;
}