CSSの::markerを完全攻略！リストの点や数字をオシャレに変える方法

::markerでリストのマーカーを変更する方法

先生と生徒の会話形式で理解しよう

生徒

「箇条書きのリストを作ったとき、左側に出る黒い点の色や形をCSSで変えることってできますか？」

先生

「はい、CSSの『::marker』という擬似要素を使えば、リストの点や数字だけを狙ってデザインを変えることができますよ。」

生徒

「これまではリスト全体の文字色が変わってしまって困っていたんです。点だけの色を変えるのも簡単ですか？」

先生

「とても簡単です！専用の書き方を知るだけで、表現の幅がグッと広がります。さっそく基本から見ていきましょう！」

1. リストのマーカーとは何を指すのか？

Webサイトで「箇条書き」を作るとき、HTMLでは ul タグや ol タグ、そして li タグというものを使います。このとき、各項目の先頭に自動で表示される「黒い丸（●）」や「数字（1, 2, 3...）」のことを、専門用語でマーカー（marker）と呼びます。

プログラミング未経験の方にとって、このマーカーは「勝手に出てくる消せないもの」というイメージがあるかもしれません。しかし、CSS（シーエスエス）というデザイン専用の命令を使うことで、この小さな点の色を赤くしたり、文字より大きくしたり、あるいは全く別の記号に置き換えたりすることが可能になります。パソコンの画面を華やかにするために、まずはこの小さなパーツの操り方を学びましょう。

2. ::markerという便利な擬似要素の基本

CSSには、特定のパーツだけを指し示す擬似要素（ぎじようそ）という仕組みがあります。今回主役となる ::marker は、まさにリストの先頭にある記号や数字だけをピンポイントで指定するための合図です。

これまでは、リストの点の色を変えるために複雑なテクニックが必要でしたが、現在は ::marker と書くだけで、ブラウザが「あ、このリストの先頭部分のことだね！」と理解してくれます。難しい単語に聞こえるかもしれませんが、使い方は非常にシンプルです。まずは、最も基本的な「色を変える」コードから体験してみましょう。


<style>
    li::marker {
        color: #ff5733;
        font-size: 1.5rem;
    }
</style>

<div class="p-3">
    <ul class="list-group-flush">
        <li>リンゴを買いに行く</li>
        <li>部屋の掃除をする</li>
        <li>プログラミングの勉強</li>
    </ul>
</div>

ブラウザ表示

3. 番号付きリストの数字をスタイリングする

次に、数字で順番を表示する ol タグのマーカーをカスタマイズしてみましょう。通常の数字は少し地味に見えますが、::marker を使えば数字の色を太くしたり、フォントを変えたりして目立たせることができます。

例えば、料理のレシピサイトや手順を説明するブログでは、ステップ番号が目立つとユーザーにとって非常に読みやすくなります。ここでのポイントは、本文の文字色はそのままで、数字だけをアクセントカラーに変えることです。これにより、デザインに統一感を持たせつつ、重要な情報を強調することができるようになります。視認性（見やすさ）を高めるためのテクニックとして活用してください。


<style>
    .step-list li::marker {
        color: #007bff;
        font-weight: bold;
        font-style: italic;
    }
</style>

<div class="p-3 border rounded bg-light">
    <h5 class="mb-3">Webサイト公開までの手順</h5>
    <ol class="step-list">
        <li>ドメインを取得する</li>
        <li>サーバーをレンタルする</li>
        <li>ファイルをアップロードする</li>
    </ol>
</div>

ブラウザ表示

4. 任意の文字や絵文字をマーカーにする方法

::marker のすごいところは、既存の丸や数字を「自分の好きな文字」に置き換えられる点です。これには content（コンテント） というプロパティを使います。content を使えば、チェックマークや星印、あるいは特定のキーワードをすべてのリストの先頭に自動で付けることができます。

例えば、チェックリストを作りたいときに「チェックマーク」を表示させたり、重要なポイントに「星」を表示させたりすることが可能です。これまで画像を用意して背景に設定していたような面倒な作業が、たった一行のコードで解決します。パソコン初心者の方でも、お気に入りの記号を入れてみるだけで、サイト作りがもっと楽しくなるはずです。


<style>
    .star-list li::marker {
        content: '★ ';
        color: #ffc107;
        font-size: 1.2rem;
    }
</style>

<div class="p-3">
    <ul class="star-list">
        <li>デザインの基本を学ぶ</li>
        <li>色彩心理学を取り入れる</li>
        <li>ユーザー体験を向上させる</li>
    </ul>
</div>

ブラウザ表示

5. マーカーに使用できるプロパティの制限について

::marker は非常に便利ですが、実は何でも自由に設定できるわけではありません。マーカーとして変更できる項目には、いくつか制限があります。主に変更できるのは「文字の色（color）」「フォントの種類や大きさ（font系）」「内容（content）」などです。

例えば、マーカーの周りに大きな余白（margin）を作ったり、マーカーを回転させたりといった複雑なレイアウト変更は、この ::marker だけでは行えません。これは、あくまで「リストの補助的な印」としての役割を保つためです。もし、もっと自由な位置に自由に画像を配置したい場合は、別の方法（::before など）を学ぶ必要がありますが、まずは基本の ::marker でできる範囲をマスターすることが上達の近道です。パソコンを初めて触る方は、無理をせず「色」や「形」を変えることから楽しみましょう。

6. リスト全体のバランスを整えるコツ

マーカーをカスタマイズしたら、次はリスト全体のバランスを確認しましょう。マーカーだけを大きくしすぎると、本文の文字との距離が詰まって見えたり、逆に離れすぎて見えたりすることがあります。そんな時は、li タグ自体の余白を調整することで、全体を美しく整えることができます。

また、マーカーの種類を「なし」に設定したい場合は list-style: none; という命令を使いますが、その上で ::marker を使って独自の記号を出すという手法もあります。デザインの現場では、あえて標準の機能を隠してから、自分好みのスタイルを上書きすることがよくあります。少しずつ「設定を上書きする」という感覚に慣れていくと、プロのようなコーディングができるようになっていきます。

7. ブラウザの対応状況を確認しよう

::marker は比較的新しいCSSの機能です。現在、Google Chrome や Safari、Microsoft Edge といった主要なブラウザでは問題なく表示されます。しかし、非常に古いパソコンや古いブラウザを使っているユーザーには、意図したデザインが見えない可能性があることも頭の片隅に置いておきましょう。

プロのWebデザイナーは「どの環境で見ても情報が伝わること」を一番大切にします。もし ::marker が動かなくても、リストとしての機能（箇条書きであること）は失われません。デザインはあくまでプラスアルファの要素です。まずは今の自分が使っているブラウザで綺麗に表示されることを喜び、一歩ずつ知識を深めていきましょう。Webの世界は日々進化しているので、最新の便利な書き方を学ぶことはとても価値のあることです。

8. 実際にコードを書いて試してみる大切さ

ここまで読んでくださった皆さんは、リストのマーカーを変える方法についてかなり詳しくなったはずです。しかし、知識として知っているのと、実際に自分の手で動かしてみるのとでは大きな違いがあります。まずはメモ帳アプリやコードエディタを開いて、今回紹介したサンプルコードをコピーして貼り付けてみてください。

文字の色を自分の好きな色に変えてみたり、お気に入りの絵文字を content に入れてみたりしましょう。自分の命令どおりに画面が変化する瞬間こそが、プログラミングやWeb制作の一番の醍醐味です。失敗してもパソコンが壊れることはありません。どんどん実験して、自分だけのオシャレなリストデザインを作り上げてください。あなたの創造力が形になることを楽しみにしています！

2026年最新スキルアップ・実践セミナー