箇条書きリストの点の色を変えるCSS｜ul要素のカスタマイズでデザイン性アップ

Webサイトやブログで使われる箇条書きリスト（ul要素）は、デフォルトではシンプルな黒い点（ディスク）で表示されますが、デザインにこだわりたい場合は少し味気なく感じることもあります。

この記事では、CSSを使って箇条書きの点（マーカー）の色を変更する方法を分かりやすく解説します。

• リスト１
• リスト２
• リスト３

サイト全体のメインカラーとリストの色を揃えることで、より統一感のあるデザインに仕上げることができます。かわいくておしゃれなリストデザインを作りたい方はぜひ参考にしてください。

About meこの記事を書いた人

はるみです

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

＜実績＞

• ドメインパワー : 40（2025年6月時点）
• 2023年より有料記事公開
  累計450件（月間約20件）のご購入実績
• 丁寧にサポート

箇条書きリストのカスタマイズ例｜デザインイメージ

サイト全体や囲み枠に合わせて点の色や形を変更すると、印象がぐっとおしゃれになります。

以下は、CSSで点（マーカー）をカスタマイズしたイメージです。

ボックスの色とリストの色を合わせると特にかわいい！

このカスタマイズでできること

• サイトのメインカラーと統一感のあるリストにできる
• かわいく・おしゃれに見せたいときに効果的
• ポイントリストや注意事項の装飾にも便利

この記事で使う技術

今回紹介する方法はすべて CSS（スタイルシート）を使ったカスタマイズです。HTMLの構造は基本のまま見た目だけを変える方法なので、比較的簡単に実装できます。

作業前にはバックアップを行い、編集は子テーマを使用しましょう。

CSSの記述について

子テーマのスタイルシートを使用します。

1. 管理画面の「外観」から「テーマファイルエディター」をクリック
   • Cocoon Child: スタイルシート (style.css) のページが開きます
2. 元から書いているコード（テーマ情報）は消さずにCSSを記述します
   • /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

子テーマ（Cocoon child）が選択されていることを確認してください。

参考記事 Cocoonカスタマイズ｜HTML・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>３つめの項目</li>
</ul>

番号ありリスト（<ol>タグ）

番号付きの箇条書きを作る場合は、<ol>タグを使用します。

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

CSSで点（マーカー）の色を変える3つの方法

HTMLの<ul>タグで作成される番号なしリスト（箇条書き）では、先頭に「・」のような黒い点（マーカー）が表示されます。このマーカーを自分好みにカスタマイズするには次の3つの方法があります。

基本的には「①」と「②」の方法だけ覚えておけばOK。どちらもCSSだけで実装できるので、使いやすい方法を選んで試してみてください。

このあと、それぞれの方法について「コピペできるコード例」と「実際の表示イメージ」を交えて解説していきます。

①::beforeを使ってマーカーをカスタマイズする方法【おすすめ】

擬似要素 ::before を使えば箇条書きの先頭に好きな形・色のマーカーを自由に表示できます。デフォルトの点（disc）を非表示にして、自分好みのデザインを追加するイメージです。

使用するHTML

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

<ul> にクラス名 custom-list をつけて、CSSを適用します。

クラスの追加方法（WordPress ブロックエディタの場合）

1. 箇条書きブロック（リスト）を作成
2. 親要素である <ul> タグを選択
3. 右側のサイドメニューから「高度な設定」→「追加CSSクラス」に custom-list と入力

以下のHTMLコードが作られます。

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

See the Pen list(class) by はるみ (@hacchan) on CodePen.

WordPressのブロックエディタでは、特定のブロックだけに独自スタイルを適用できる「追加CSSクラス」機能がとても便利。詳しくは以下の記事を参考にしてください。

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

WordPressのブロックエディタで、特定のブロックに独自のデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます。この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を交...

turicco.com

カスタマイズ用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%; /* 点を丸くする */
}

/* モバイルでのレスポンシブ対応 */
@media screen and (max-width: 834px) {
  .custom-list > li:before {
    top: 10px; /* モバイルでの垂直位置の調整 */
  }
}

デザインの応用例

• background-color を変えて、サイトのメインカラーに合わせる
• width / height を変更して、点の大きさを調整
• マーカーの代わりに content に絵文字（✔ や ★）を入れて、より印象的なリストに
• border-radius を外して四角いマーカーに変更も可能

カスタマイズの自由度が高い

::before を使ったこの方法は、ややCSSの記述が増えますがデザインの自由度が非常に高く、サイトの雰囲気に合わせたオリジナルの箇条書きを作りたい場合に最適です。

②::markerを使ってマーカーの色を変更する方法

CSSの疑似要素 ::marker を使うと、リストアイテム（<li>）のマーカー部分（点や番号）の色やサイズを直接変更できます。

::markerの使い方

以下は、リストの点の色を赤に変更するシンプルな例です。

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

li::marker {
  color: red; /* 点の色を赤色にする */
}

• li::marker は、リストの各項目の「マーカー部分」にスタイルを適用します。
• color プロパティで色を変えられるので、サイトのテーマカラーに合わせて自由に調整できます。

::marker のブラウザサポート状況（2025年6月現在）

2025年6月時点で主要なモダンブラウザでは::markerが広くサポートされています。非常に古いブラウザや特殊な環境では未対応の場合がありますがこれらの利用はかなり限定的です。

ブラウザ互換性を最大限に確保したい場合は、::before擬似要素によるカスタマイズを併用するのがおすすめ。

::markerで設定できる主なCSSプロパティ

• color: マーカーの色を変更（最も確実に反映されます）
• font-family: 一部ブラウザで対応（Safariなどでは無効なことも）
• font-size: マーカーのサイズに影響しますが、反映は限定的
• content: 通常は使用不可（CSSカウンターなど一部で利用可）

注意： background-color や border などの装飾系プロパティは使用できません。あくまでテキストベースのマーカーをシンプルに調整する用途に向いています。

③ <li>内に<span>を入れてマーカー風にカスタマイズする方法

リストアイテム（<li>）の中身を <span> タグで囲んで部分的にスタイルを変更する方法もあります。この方法は各項目ごとに違う色や装飾を加えたい場合に便利ですが、HTMLが冗長になる点がデメリット。

See the Pen list-span by はるみ (@hacchan) on CodePen.

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

ここまで紹介してきた3つの方法を、目的別・特長別に比較しながら振り返ります。「どの方法を使えばいいか迷う…」という方は、以下の表を参考にしてください。

比較表｜マーカーカスタマイズ3つの方法

どれを選べばいい？

• 柔軟にカスタマイズしたい／装飾を加えたい → ::before が最適！
  • → サイトの雰囲気に合ったマーカーを自由に作れます。
• とにかく手軽に色だけ変えたい → ::marker がおすすめ
  • → コードも短く、ブロックエディタでも使いやすい方法です。
• テキスト部分だけ個別に調整したい → <span> を活用
  • → マーカーではなく本文の装飾目的に最適です。

以上、箇条書きリストの点（マーカー）をカスタマイズする3つの方法をご紹介しました。

見やすく統一感のあるリストデザインにすることで、ブログやWebサイトのデザイン性や可読性がアップします。自分のサイトに合った方法でリストデザインを楽しんでくださいね！