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

2021年12月03日2025年04月19日

こばゆた

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

リスト
リスト
リスト

そんな時のメモです。

今日のテーマ

リストの前につく点の色を変える
位置がズレるのも合わせて解消できる

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

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

1.リストに色を付ける

今回は２パターン紹介したいと思います。

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

メリット

リストの点の色を変えられる

デメリット

その都度spanで囲む必要がある
CSSでの指定が手間

STEP1

リストを作成する

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

リスト
リスト
リスト

STEP2

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

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

STEP3
リストに色を付ける
まずリスト全体にマーカーに設定したい色を設定します。
```
ul{
 color: blue; /* リストマーカーの色を指定 */
}
```
- リスト
- リスト
- リスト

STEP4

spanタグに色を付ける

文字色に設定した色に戻せば完成です。

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

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

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

ul li::before{
 content: "⚫︎"; /* 記号(黒丸)を挿入 */
 color: blue; /* 好きな色にする */
 font-size: 0.6em; /* 点の大きさ */
 margin-right: 1em; /* 点とテキストの距離 */
}

リスト
リスト
リスト

完成です。

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

ul{
 list-style: none;
}

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

ul li::before{
  content: "❤︎";
  color: #f67690;
  font-size: 1.5em; /* ハートの大きさ */
  margin-right: 0.25em; /* 点とテキストの距離 */
}

リスト
リスト
リスト

２.まとめ

こばゆた

今回は２パターン初回しましたが、
後者の疑似要素を使用する方が特にデメリットもなくできるので疑似要素を使う方が良いのかなと思います。

2025年3月追記です

コメントいただきましたので追記させていただきます！

短いテキストの場合ならalign-items: center;でも良いかと思いますが、
長めだと点の高さが希望の位置にならないので修正ポイントを記述しておきます。

こちらも合わせてご確認くださいませ。

ul{
 list-style: none;
}

ul li{
  display: flex;
}

ul li::before{
  content: "⚫";
  color: #ddd;
  font-size: 10px; /* 点の大きさ */
  margin-right: 0.5em; /* 点とテキストの距離 */
  position: relative;
  top: 10px; /* ここの値を調整して高さを揃える */
}

ケンジより:

2025年2月5日 8:56 PM

すみません質問というか要望があります
こちらの『1-2.パターン2 疑似要素で作成する』を使用させていただいたのですが、リスト内で改行をすると、リストの点の位置が一行目ではなく、一行目と二行目の間の位置に来てしまいます
この点を一行目の正しい位置に固定する記述を教えていただけませんでしょうか
よろしくお願いいたしますm(__)m

返信
- こばゆたより:
  
  2025年2月6日 11:45 AM
  
  コメントありがとうございます。
  コメントをいただいたことで新たな気づきと修正点が見つかりましたので大変助かりました。
  
  複数行の場合はalign-items: center;を削除してみてはいかがでしょうか？
  
  参考までにgoogle fontsで特殊なフォントを読み込んでいる場合はテキストの高さ(line-height)が変わってきますのでこの限りではないかもしれないですのでご注意ください。
  
  返信
  - ケンジより:
    
    2025年2月6日 7:29 PM
    
    返信とアドバイスをありがとうございますm(__)m
    ご指摘の通りに align-items: center; /* 垂直方向に中央揃い */　を削除しましたところ、点が一行目に来たのは良いのですが今度は一行目の上の方に来てしまってこれもまた不自然な感じになってしまいました…
    ｀テキスト　←ちょっとわかりにくいかもしれませんがこういう感じです
    
    点の位置が一行目で且つテキストの真ん中の位置というのが一番良いポジションなのですが中々難しいものなのですね(汗
    ・一行目テキスト
    　二行目テキスト
    
    こちらを実現したいのですが何とかなりませんでしょうか・・・
    
    返信
こばゆたより:

2025年2月8日 10:18 AM

そうなってくると、

li::before{
　　　・
　　　・
　　　略
position: relative;
top: 〇〇px;　←ここの数値で合わせる
}

少々強引ではありますがこちらはいかがでしょうか？

返信
ケンジより:

2025年2月8日 11:20 AM

ありがとうございます！そのやり方でばっちりできました！
まとめると

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

から
align-items: center; /* 垂直方向に中央揃い */
を消します

そして

li::before{
content: “⚫︎”; /* 記号(黒丸)を挿入 */
color: blue; /* 好きな色にする */
font-size: 0.6em; /* 黒丸の大きさに差異があるので調整 */
margin-right: 1em; /* 余白 */
}

の中に
position: relative;
top: 5px;/* 5pxにしてみました */
を足して

li::before{
content: “⚫︎”; /* 記号(黒丸)を挿入 */
color: blue; /* 好きな色にする */
font-size: 0.6em; /* 黒丸の大きさに差異があるので調整 */
margin-right: 1em; /* 余白 */
position: relative;
top: 5px;/* 5pxにしてみました */
}

これで思ってた通りにレイアウトになりました
色々と御指南いただきありがとうございました
また他のCSSを利用させていただく機会がありましたらその時はよろしくおねがいいたしますm(__)m
お世話になりました！

返信
こばゆたより:

2025年2月10日 2:47 PM

理想の形ができてよかったです！

また何かありましたら参考にしていただけたらと思います。
もちろん聞いてもらっても大丈夫ですw

返信

1.リストに色を付ける

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

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

２.まとめ

広告

コメント