
こばゆた
以下の様にリストの先頭に付く点(リストマーカー)に色を付けたい時があるかもしれません
- リスト
- リスト
- リスト
そんな時のメモです。
今日のテーマ
- リストの前につく点の色を変える
- 位置がズレるのも合わせて解消できる
またリスト関連の記事はコチラになります↓
1.リストに色を付ける
今回は2パターン紹介したいと思います。
1-1.パターン1 spanタグを使う
メリット
- リストの点の色を変えられる
デメリット
- その都度spanで囲む必要がある
- CSSでの指定が手間
- STEP1リストを作成する
<ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul>
- リスト
- リスト
- リスト
- STEP2liタグの中にspanタグを入れる
<ul> <li><span>リスト</span></li> <li><span>リスト</span></li> <li><span>リスト</span></li> </ul>
- STEP3リストに色を付けるまずリスト全体にマーカーに設定したい色を設定します。
ul{ color: blue; /* リストマーカーの色を指定 */ }
- リスト
- リスト
- リスト
- STEP4spanタグに色を付ける文字色に設定した色に戻せば完成です。
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; /* 点とテキストの距離 */
}
- リスト
- リスト
- リスト
2.まとめ

こばゆた
今回は2パターン初回しましたが、
後者の疑似要素を使用する方が特にデメリットもなくできるので疑似要素を使う方が良いのかなと思います。
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; /* ここの値を調整して高さを揃える */
}
コメント
すみません質問というか要望があります
こちらの『1-2.パターン2 疑似要素で作成する』を使用させていただいたのですが、リスト内で改行をすると、リストの点の位置が一行目ではなく、一行目と二行目の間の位置に来てしまいます
この点を一行目の正しい位置に固定する記述を教えていただけませんでしょうか
よろしくお願いいたしますm(__)m
コメントありがとうございます。
コメントをいただいたことで新たな気づきと修正点が見つかりましたので大変助かりました。
複数行の場合はalign-items: center;を削除してみてはいかがでしょうか?
参考までにgoogle fontsで特殊なフォントを読み込んでいる場合はテキストの高さ(line-height)が変わってきますのでこの限りではないかもしれないですのでご注意ください。
返信とアドバイスをありがとうございますm(__)m
ご指摘の通りに align-items: center; /* 垂直方向に中央揃い */ を削除しましたところ、点が一行目に来たのは良いのですが今度は一行目の上の方に来てしまってこれもまた不自然な感じになってしまいました…
`テキスト ←ちょっとわかりにくいかもしれませんがこういう感じです
点の位置が一行目で且つテキストの真ん中の位置というのが一番良いポジションなのですが中々難しいものなのですね(汗
・一行目テキスト
二行目テキスト
こちらを実現したいのですが何とかなりませんでしょうか・・・
そうなってくると、
li::before{
・
・
略
position: relative;
top: 〇〇px; ←ここの数値で合わせる
}
少々強引ではありますがこちらはいかがでしょうか?
ありがとうございます!そのやり方でばっちりできました!
まとめると
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
お世話になりました!
理想の形ができてよかったです!
また何かありましたら参考にしていただけたらと思います。
もちろん聞いてもらっても大丈夫ですw