サイト型トップページの作り方を公開しています!Check

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

アイキャッチ|リストデザイン テーマ共通
テーマ共通
記事内に広告が含まれています

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

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

  • リスト1
  • リスト2
  • リスト3

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

スポンサーリンク

この記事を書いた人

はるみです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40(2025年6月現在)
  • 2023年~有料記事公開
    • →累計420件(月間約20件)購入いただいています

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

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

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

カスタマイズ前(デフォルト)
  • リスト1
  • リスト2
  • リスト3

通常はこのように黒い小さな丸(disc)が表示されます。

カスタマイズ後(色・サイズ変更)
  • リスト1
  • リスト2
  • リスト3

点をピンク色に変更し、サイズも少し大きめにカスタマイズしています。

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

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

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

この記事で使う技術

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

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

\Cocoonの場合はこちらを参考にしてください/

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

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

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

CSS編集/スタイルシート

参考記事 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>3つめの項目</li>
</ul>
ブラウザでの表示例
  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

番号ありリスト(<ol>タグ)

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

<ol>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ol>
ブラウザでの表示例
  1. 1つめの項目
  2. 2つめの項目
  3. 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 ブロックエディタの場合)

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

子要素の <li> ではなく、必ず親要素の <ul> にクラスを追加してください。

以下の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クラス」の使い方/

カスタマイズ用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-colorborder などの装飾系プロパティは使用できません。あくまでテキストベースのマーカーをシンプルに調整する用途に向いています。

<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 コメントはこちらへお願いします

タイトルとURLをコピーしました