Webサイトやブログで使われる箇条書きリスト(ul要素)は、デフォルトではシンプルな黒い点(ディスク)で表示されますが、デザインにこだわりたい場合は少し味気なく感じることもあります。
この記事では、CSSを使って箇条書きの点(マーカー)の色を変更する方法を分かりやすく解説します。
- リスト1
- リスト2
- リスト3
サイト全体のメインカラーとリストの色を揃えることで、より統一感のあるデザインに仕上げることができます。かわいくておしゃれなリストデザインを作りたい方はぜひ参考にしてください。
箇条書きリストのカスタマイズ例|デザインイメージ
サイト全体や囲み枠に合わせて点の色や形を変更すると、印象がぐっとおしゃれになります。
以下は、CSSで点(マーカー)をカスタマイズしたイメージです。
- リスト1
- リスト2
- リスト3
通常はこのように黒い小さな丸(disc)が表示されます。
- リスト1
- リスト2
- リスト3
点をピンク色に変更し、サイズも少し大きめにカスタマイズしています。

ボックスの色とリストの色を合わせると特にかわいい!
このカスタマイズでできること
- サイトのメインカラーと統一感のあるリストにできる
- かわいく・おしゃれに見せたいときに効果的
- ポイントリストや注意事項の装飾にも便利
この記事で使う技術
今回紹介する方法はすべて CSS(スタイルシート)を使ったカスタマイズです。HTMLの構造は基本のまま見た目だけを変える方法なので、比較的簡単に実装できます。
作業前にはバックアップを行い、編集は子テーマを使用しましょう。
子テーマのスタイルシートを使用します。
- 管理画面の「外観」から「テーマファイルエディター」をクリック
- Cocoon Child: スタイルシート (style.css) のページが開きます
- 元から書いているコード(テーマ情報)は消さずにCSSを記述します
- /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

HTMLで箇条書きを作る基本|ul・liタグの使い方
マーカーの色をCSSで変更するには、まずHTMLのリスト構造を理解しておくとスムーズです。
箇条書きを作るには以下のタグを組み合わせて使います。
<ul>
:順序のないリスト(黒い点)<ol>
:順序のあるリスト(数字付き)<li>
:リストの各項目(リストアイテム)
基本的に、<ul>
+ <li>
または <ol>
+ <li>
のセットで使用します。

WordPressのブロックエディタを使っている場合は、「リストブロック」を選ぶだけで自動的に上記のHTMLが生成されます。
HTMLの使い方(簡単な例)
番号なしリスト(<ul>
タグ)
番号のない箇条書きを作る場合、<ul>
タグで全体を囲み、各項目を<li>
タグで囲みます。
<ul>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ul>
- 1つめの項目
- 2つめの項目
- 3つめの項目
番号ありリスト(<ol>
タグ)
番号付きの箇条書きを作る場合は、<ol>
タグを使用します。
<ol>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ol>
- 1つめの項目
- 2つめの項目
- 3つめの項目
CSSで点(マーカー)の色を変える3つの方法
HTMLの<ul>
タグで作成される番号なしリスト(箇条書き)では、先頭に「・」のような黒い点(マーカー)が表示されます。このマーカーを自分好みにカスタマイズするには次の3つの方法があります。
方法 | 特徴 |
---|---|
① ::before 擬似要素を使う | 自由度が高く、色・形・大きさなど自在に調整可能 |
② ::marker 擬似要素を使う | CSSが簡潔で手軽に色変更が可能 |
③ li内に span タグを使って調整 | テキスト部分の装飾を個別に設定したい場合に便利 |
基本的には「①」と「②」の方法だけ覚えておけばOK。どちらもCSSだけで実装できるので、使いやすい方法を選んで試してみてください。
このあと、それぞれの方法について「コピペできるコード例」と「実際の表示イメージ」を交えて解説していきます。
①::beforeを使ってマーカーをカスタマイズする方法【おすすめ】
擬似要素 ::before
を使えば箇条書きの先頭に好きな形・色のマーカーを自由に表示できます。デフォルトの点(disc)を非表示にして、自分好みのデザインを追加するイメージです。
使用するHTML
<ul class="custom-list">
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ul>
<ul>
にクラス名 custom-list
をつけて、CSSを適用します。
クラスの追加方法(WordPress ブロックエディタの場合)
- 箇条書きブロック(リスト)を作成
- 親要素である
<ul>
タグを選択 - 右側のサイドメニューから「高度な設定」→「追加CSSクラス」に
custom-list
と入力
以下のHTMLコードが作られます。
<ul class="custom-list">
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ul>
See the Pen list(class) by はるみ (@hacchan) on CodePen.
WordPressのブロックエディタでは、特定のブロックだけに独自スタイルを適用できる「追加CSSクラス」機能がとても便利。詳しくは以下の記事を参考にしてください。
カスタマイズ用CSS
/* カスタマイズされたリストの点 */
.custom-list {
list-style: none; /* デフォルトの点を消す */
line-height: 1.8; /* 行間を広げる */
}
.custom-list > li {
position: relative; /* 点の配置基準 */
}
.custom-list > li:before {
content: ''; /* 点の内容を空に */
background-color: #dbb6a2; /* 点の色 */
position: absolute; /* 点の位置 */
top: 11px; /* 垂直位置の調整 */
left: -1em; /* 水平位置の調整 */
width: 7px; /* 点の幅 */
height: 7px; /* 点の高さ */
border-radius: 50%; /* 点を丸くする */
}
設定項目 | 内容 |
---|---|
list-style: none; | デフォルトの黒い点(disc)を非表示にします。 |
position: relative; | リスト項目を基準にして、::before を絶対配置できるようにします。 |
::before | 空の内容('' )で、マーカー代わりの「丸」を作成します。 |
background-color: pink; | マーカーの色をピンクに設定。色は自由に変更可能です。 |
width / height | マーカーのサイズ指定(7px×7px)。 |
border-radius: 50% | 完全な円にします。四角にしたい場合はこれを外します。 |
top / left | マーカーの表示位置を微調整します。フォントサイズによって調整が必要な場合も。 |
デザインの応用例
background-color
を変えて、サイトのメインカラーに合わせるwidth
/height
を変更して、点の大きさを調整- マーカーの代わりに
content
に絵文字(✔ や ★)を入れて、より印象的なリストに border-radius
を外して四角いマーカーに変更も可能
カスタマイズの自由度が高い
::before
を使ったこの方法は、ややCSSの記述が増えますがデザインの自由度が非常に高く、サイトの雰囲気に合わせたオリジナルの箇条書きを作りたい場合に最適です。
②::markerを使ってマーカーの色を変更する方法
CSSの疑似要素 ::marker
を使うと、リストアイテム(<li>
)のマーカー部分(点や番号)の色やサイズを直接変更できます。
::marker
の使い方
以下は、リストの点の色を赤に変更するシンプルな例です。
<ul>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ul>
li::marker {
color: red; /* 点の色を赤色にする */
}
li::marker
は、リストの各項目の「マーカー部分」にスタイルを適用します。color
プロパティで色を変えられるので、サイトのテーマカラーに合わせて自由に調整可能です。
上記のCSSを適用すると、以下のようにリストの点が赤色になります。
- 1つめの項目
- 2つめの項目
- 3つめの項目
::marker のブラウザサポート状況(2025年6月現在)
ブラウザ | 対応状況 | 対応バージョン |
---|---|---|
Google Chrome | サポート済み | 88以降 |
Mozilla Firefox | サポート済み | 85以降 |
Safari (macOS/iOS) | サポート済み | 14.1以降 |
Microsoft Edge | サポート済み | 88以降 |
Opera | サポート済み | 74以降 |
Android WebView | サポート済み | 88以降 |
2025年6月時点で主要なモダンブラウザでは::marker
が広くサポートされています。非常に古いブラウザや特殊な環境では未対応の場合がありますがこれらの利用はかなり限定的です。
ブラウザ互換性を最大限に確保したい場合は、::before
擬似要素によるカスタマイズを併用するのがおすすめ。
::markerで設定できる主なCSSプロパティ
color
: マーカーの色を変更(最も確実に反映されます)font-family
: 一部ブラウザで対応(Safariなどでは無効なことも)font-size
: マーカーのサイズに影響しますが、反映は限定的content
: 通常は使用不可(CSSカウンターなど一部で利用可)
注意: background-color
や border
などの装飾系プロパティは使用できません。あくまでテキストベースのマーカーをシンプルに調整する用途に向いています。
③ <li>
内に<span>
を入れてマーカー風にカスタマイズする方法
リストアイテム(<li>
)の中身を <span>
タグで囲んで部分的にスタイルを変更する方法もあります。この方法は各項目ごとに違う色や装飾を加えたい場合に便利ですが、HTMLが冗長になる点がデメリット。
span
タグとは<span>
は特に意味を持たないインライン要素で周囲のテキストと同じ行に表示されるのが特徴です。主に「部分的なスタイル適用」に使われ、CSSで色や装飾をピンポイントで加えたいときに便利です。
- Step1
<li>
タグ内に<span>
を入れるまず、各リスト項目の内容を
<span>
タグで囲みます。<ul> <li><span>1つめの項目</span></li> <li><span>2つめの項目</span></li> <li><span>3つめの項目</span></li> </ul>
- Step2リスト全体に色を設定(マーカー風)
ul li
に対して、ベースとなる文字色(ここではピンク系)を設定します。ul li { color: #dbb6a2; /* リスト全体の文字色をピンクベージュに */ }
これで、リスト項目(点とテキスト)がすべてピンク系になります。
- Step3
<span>
部分に別の色を指定次に
<span>
タグの部分だけに異なる色(ここでは黒)を適用します。ul li span { color: black; /* テキスト部分の色を黒に上書き */ }
この設定により、リストの点(マーカー)はピンクのまま、テキストだけ黒く表示されるようになります。
See the Pen list-span by はるみ (@hacchan) on CodePen.
箇条書きリストのマーカーをカスタマイズする3つの方法まとめ
ここまで紹介してきた3つの方法を、目的別・特長別に比較しながら振り返ります。「どの方法を使えばいいか迷う…」という方は、以下の表を参考にしてください。
比較表|マーカーカスタマイズ3つの方法
方法 | 特長 | メリット | デメリット | 難易度 |
---|---|---|---|---|
① ::before を使う | 擬似要素で自由にデザイン可能 | デザインの自由度が高い 形・色・サイズ変更も自由 | CSSがやや長くなる | 中〜上 |
② ::marker を使う | CSSでマーカーに直接スタイル適用 | 記述がシンプル 少ないコードで色変更可能 | 装飾制限あり 古い環境では非対応 | 初級 |
③ <span> を使う | テキスト部分を個別に装飾可能 | 色や装飾を項目ごとに自由に調整可能 | HTMLが冗長になりやすい | 初級〜中級 |
どれを選べばいい?
- 柔軟にカスタマイズしたい/装飾を加えたい →
::before
が最適!
→ サイトの雰囲気に合ったマーカーを自由に作れます。 - とにかく手軽に色だけ変えたい →
::marker
がおすすめ
→ コードも短く、ブロックエディタでも使いやすい方法です。 - テキスト部分だけ個別に調整したい →
<span>
を活用
→ マーカーではなく本文の装飾目的に最適です。
以上、箇条書きリストの点(マーカー)をカスタマイズする3つの方法をご紹介しました。
見やすく統一感のあるリストデザインにすることで、ブログやWebサイトのデザイン性や可読性がアップします。自分のサイトに合った方法でリストデザインを楽しんでくださいね!
Comment コメントはこちらへお願いします