箇条書きリスト｜CSSで点の色を変える3つの方法

箇条書き（番号なしリスト）では、先頭に「・」のような黒い点（マーカー）が表示されます。

このマーカーを自分好みにカスタマイズすることで、リストをサイトデザインに合わせておしゃれに見せることができます。この記事では、初心者でもすぐできる3つの方法をコード例と表示イメージつきで詳しく解説します。

About meこの記事を書いた人

はるみです

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

• ドメインパワー : 40
• 2023年より有料記事公開
  累計500件（月間約20件）のご購入実績
  （2025年9月現在）
• カスタマイズを丁寧にサポート

HTMLで箇条書きを作る基本（初心者向け補足）

箇条書きリストのマーカーをCSSで変更する前に、リストのHTML構造を簡単に理解しておくとスムーズです。

• <ul>：順序のないリスト（黒い点のリスト）
• <ol>：順序のあるリスト（番号付き）
• <li>：リストの各項目（リストアイテム）

基本は <ul> + <li> または <ol> + <li> の組み合わせです。

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

<ol>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>３つめの項目</li>
</ol>

WordPressのブロックエディタを使う場合、「リストブロック」を選ぶだけで自動的にこのHTMLが生成されます。

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

リストの点（マーカー）の色を変える方法はいくつかあります。ここでは初心者でも使いやすい3つの方法を、メリット・デメリットを交えて紹介します。用途やデザインに合わせて選んでみましょう。

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

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

See the Pen 予備 by Turicco (@Turicco) on CodePen.

HTMLの準備

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

CSSの記述例

/* ::marker を使ったカスタムマーカー */
ul li::marker {
  color: #dbb6a2;  /* 点の色をピンク系に変更 */
}

とっても簡単～！！

反映範囲について

ul li::marker { … }

のようにセレクタを広く指定すると サイト全体のリストに反映 されます。逆に、特定のリストだけに適用したい場合は、ul.custom-marker li::marker { … } のようにクラスを付けましょう。

WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法

WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます...

turicco.com

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

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

See the Pen Untitled 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 予備 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;    /* テキストを黒に上書き */
}

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

1. シンプルに色だけ変えたい → ① ::marker
   • 例：黒い点をサイトのテーマカラーに変える
   • メンテナンスが楽で、ほとんどの環境で問題なし
2. デザイン性を重視したオリジナルマーカー → ② ::before
   • 例：丸だけでなく四角や絵文字などに変更
   • サイトの雰囲気に合わせたユニークな箇条書きが可能
3. 項目ごとに個別装飾したい → ③ <span> タグ
   • 例：1つめの項目だけ色を変える、強調したい箇所だけマーカー変更
   • HTMLが少し複雑になるが柔軟性が高い

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