CSSでul/liのリストマーカー色を変更する方法｜::marker・::before・spanの違いと使い分け

CSSでul/liのリストマーカーの色を変えたいけど、「どうやってやるのかわからない…」「HTMLを変更せずに簡単に色だけ変えたい」という方に向けた解説です。

実は、CSSだけで簡単にリストマーカーの色を変更できます。

用途に応じて3つの方法があり、初心者でもすぐ使えるものから、形やデザインまで自由にカスタマイズできる方法まで揃っています。

例えば、色だけを変更する場合は1行のCSSでOKです。

ul li::marker {
  color: #dbb6a2; /* 好きな色に変更 */
}

• HTMLはそのまま変更不要
• テキストには影響せずマーカーだけ変更
• 数秒で実装可能

さらに、「丸だけでなく四角や絵文字に変えたい」「項目ごとにマーカー色を変えたい」という場合も、::beforeやspanを使えば自由自在です。

この記事では、CSSでul/liリストマーカーの色を変える3つの方法を、メリット・デメリット・実際のコード例付きで解説します。WordPressでも簡単に対応可能です。

マーカーはどういう仕組みで表示されている？

箇条書きの「・」は文字ではなく、li に専用のマーカー表示エリアがあります。CSSの list-style で管理され、例えば以下のように指定されています。

ul {
  list-style: disc; /* 黒丸 */
}

• 初期状態ではマーカーはテキストの外側に配置（list-style-position: outside）
• marginやpaddingで細かく動かすのは難しい
• テキストとは別パーツとして扱われる

箇条書きリスト｜CSSで点（マーカー）の色を変える方法

リストマーカーをカスタマイズする主な方法は3つです。

方法	特徴
① ::marker 擬似要素	CSSだけで色変更、HTML変更不要
② ::before 擬似要素	形・大きさ・アイコンなど自由にカスタマイズ可能
③ <li> 内に <span> タグ	項目ごとに個別装飾が可能だがHTMLは少し冗長

それぞれ詳しく解説します。

① ::marker 擬似要素を使う方法（もっとも手軽）

::marker はリストの「マーカー部分（点や数字）」に直接スタイルを適用できるCSSの疑似要素です。

See the Pen リストスタイル｜::marker by Turicco (@Turicco) on CodePen.

HTMLの準備

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>

CSSの記述例

ul li::marker {
  color: #dbb6a2; /* 点の色をピンク系に変更 */
}

② ::before 擬似要素を使う方法（自由度が高い）

::before 擬似要素を使うと、リスト項目（<li>）の前に自由なデザインのマーカーを追加できます。

See the Pen リストスタイル｜:before by Turicco (@Turicco) on CodePen.

HTMLの準備

<ul class="custom-list">
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>

• <ul> にクラス custom-list を追加
• <li> はそのまま使用

CSSの記述例

/* カスタムリストの基本設定 */
ul.custom-list {
  list-style: none; /* デフォルトの点を消す */
  line-height: 1.8; /* 行間を広げる */
  padding: 0; /* ul 自体の余白を消す */
}

/* 各リスト項目 */
ul.custom-list > li {
  position: relative;  /* 疑似要素配置の基準にする */
  padding-left: 1.5em; /* テキスト左にスペースを確保 */
}

/* 疑似要素で丸い点を作成 */
ul.custom-list > li:before {
  content: '';
  position: absolute;
  top: 0.7em;  /* 一行目の高さに合わせる（調整可） */
  left: 0.3em; /* li 左端から少し右に */
  width: 7px;  /* 点の幅 */
  height: 7px; /* 点の高さ */
  background-color: #dbb6a2; /* 点の色 */
  border-radius: 50%; /* 点を丸くする */
}

③<li>内に<span>を使う方法（柔軟だけど冗長）

リストアイテム内のテキストを <span> タグで囲み、部分的に色や装飾を変更する方法です。

See the Pen リストスタイル｜span by Turicco (@Turicco) on CodePen.

HTMLの準備

<ul class="custom-span-list">
  <li><span>1つめの項目</span></li>
  <li><span>2つめの項目</span></li>
  <li><span>3つめの項目</span></li>
</ul>

• <li> 内のテキストを <span> で囲む
• <ul> にクラスを追加して、特定のリストだけにスタイルを適用すると便利

CSSの記述例

/* リスト全体の色（点・テキスト）を設定 */
ul.custom-span-list li {
  color: #dbb6a2; /* ピンク系の色で統一 */
}

/* テキスト部分だけ色を変更 */
ul.custom-span-list li span {
  color: black;  /* テキストを黒に上書き */
}

WordPress補足｜特定ブロックだけにデザインを反映するには

• ul li::marker を広く指定するとサイト全体に反映されます
• 特定リストだけに適用したい場合は、ul.custom-marker li::marker のようにクラスを付けましょう
• ブロックエディタの「追加CSSクラス」を使うと簡単に指定できます

箇条書きリストのマーカーをカスタマイズする3つの方法まとめ

方法	難易度	デザイン自由度	用途
::marker	★☆☆	★★☆	シンプルに点の色だけ変えたい場合
::before	★★☆	★★★	色・形・大きさを自由にカスタマイズしたい場合
<span>	★★☆	★★☆	各項目ごとに異なる装飾を加えたい場合

初心者は まず ::marker を覚え、次に自由度の高い ::before に挑戦すると理解しやすいです。状況に応じて3つの方法を使い分けることでおしゃれで見やすい箇条書きを簡単に作れます。

補足記事
ワードプレステーマCocoon汎用ボックスのカスタマイズはこちら。

• ボーダー色とリストマーカー色を統一（自動調整）
• ボックスデザインをクリックだけで選択