CSSのリストマーカーのスタイリング

CSSを使用してリストマーカーをスタイルするさまざまな方法と例について解説します。

list styleとも呼ばれるリストマーカーは、例えば<ul>タグの子要素である<li>タグを識別する小さな記号（箇条書きのマーカー）として、一般的に丸いバレット（•）が使用されます。

CSSのlist-style-typeおよびlist-style-imageプロパティ、::marker疑似要素、そして::before疑似要素を使って、洗練された個性的なスタイルを適用する方法と例について解説します。

以下の目次で解説します。

  1. リストマーカーをスタイルできる関連CSSプロパティのまとめ
  2. list-style-typeプロパティの使い方
  3. list-style-imageプロパティの使い方
  4. ::marker疑似要素の使い方
  5. ::before疑似要素の使い方

リストマーカーをスタイルできる関連CSSプロパティをまとめた表です。

リストマーカーをスタイルできる関連CSSプロパティをまとめた表
CSSプロパティ 説明 例 利点・欠点
list-style-type 文字（テキスト）ベースのマーカーを指定する list-style-type: disc
（disc、circle、square などが使用可能）		 ブラウザが提供するあらかじめ定義された値の中から簡単に選択してリストマーカースタイルを設定でき、一貫性を保ちやすいという利点がありますが、デザイン（カラーやサイズなど）の制限や多様性の不足、ブラウザの互換性といった欠点もあります
list-style-image ユーザー指定の画像をマーカーとして使用する list-style-image: url("circle.png")
（好きな画像でマーカーを置き換えられます）		 ユーザー指定の画像をリストマーカーとして使用できるため、多様なデザインを実現でき、独自のアイコンやグラフィック、企業ブランドなどをマーカーとして利用できる利点がありますが、ユーザー指定の画像を作成・管理する必要があり、画像の解像度やサイズに注意を払わなければならないという欠点もあります
::marker リストアイテムのマーカーをスタイリングする li::marker {...}
（マーカーの内容、色、サイズ、フォント、文字の太さなどを指定できます）		 list-style-typeプロパティはマーカーの種類のみを指定できますが、::marker疑似要素はマーカーの内容、色、サイズ、フォント、文字の太さなどを直接指定できる利点があります。しかし、アニメーション効果など一部のスタイル指定には制約があるという欠点もあります
::before リストアイテムの前にユーザー指定のコンテンツを追加する li::before {...}
（ユーザー指定のコンテンツをリストアイテムの前に追加してマーカーの代わりに使用可能）		 リストアイテムの前にユーザー指定のコンテンツを追加するため、アニメーションやエフェクトなどを含む多様なスタイルやデザインを実現できる利点がありますが、list-style-type、list-style-image、::markerはマーカーの位置が自動的に指定されるのに対し、::beforeはユーザー指定コンテンツの位置調整が難しい場合があるという欠点があります

以下はリストマーカーに関連するHTMLタグです。

  • <ol>
  • <ul>
  • <menu>
  • <li>

list-style-typeプロパティはブラウザがサポートするリストマーカーの種類（タイプ）を指定します。

例えば、リストマーカーの種類は

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • …

などがあります。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-typeプロパティの使い方</title>
        <style>
            ul {
                list-style-type: square; /* 塗りつぶしの四角形マーカー */
            }

            ol {
                list-style-type: lower-roman; /* 小文字のローマ数字マーカー */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
        <ol>
            <li>olのli</li>
            <li>olのli</li>
            <li>olのli</li>
            <li>olのli</li>
        </ol>
    </body>
</html>
list-style-typeプロパティが適用された状態

より多くのlist-style-typeプロパティの値については、「CSS list-style-typeプロパティ – リストマーカーに使用する文字の種類の設定」をご参照ください。

利点

ブラウザが提供するあらかじめ定義された値の中から簡単に選択して、リストマーカースタイルを設定でき、一貫性を保ちやすいです。

  • 簡単な設定：ブラウザが提供するあらかじめ定義された値の中から簡単に選択して、リストマーカースタイルを設定できます。
  • 一貫性：ブラウザのデフォルトスタイルと一貫性を保つことができます。ユーザーがすでに慣れているリストマーカースタイルを提供できるため、使いやすさが向上します。

欠点

カラーやサイズなどのデザインが制限され、多様性に欠けることや、ブラウザの互換性の問題などの欠点があります。

  • 制限されたデザイン：あらかじめ定義された値のみを使用するため、特別なデザイン要件を満たすことが難しい場合があります。
  • 多様性の不足：あらかじめ定義されたスタイル以外には限られた多様性しかなく、独自のデザインを実現するには他の方法を使用する必要がある場合があります。
  • ブラウザ互換性：すべてのブラウザがすべての標準的な list-style-type の値を完全にサポートしているとは限りません。一部のブラウザでは、特定の値の表示が異なる場合があります。

list-style-imageプロパティを使用して、カスタム画像をマーカーとして使用できます。

補足説明
list-style-image プロパティはリストマーカー（箇条書きの記号）として使用する画像を指定します。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image プロパティを使う</title>
        <style>
            ul {
                list-style-image: url("heart.png"); /* 画像のマーカーを指定 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
    </body>
</html>
list-style-imageプロパティが適用された状態

利点

list-style-imageプロパティを使用すると、カスタム画像をリストマーカーとして設定できるため、さまざまなデザインを表現できます。これにより、独自のアイコンやグラフィック、企業のブランド要素などをマーカーとして活用できるのが特長です。

  • さまざまなデザイン：カスタム画像をリストマーカーとして使用することで、多彩なデザインを実現できます。
  • ユニークなスタイル：独自のアイコンやグラフィックをリストマーカーとして使用することで、ウェブページに個性を持たせることができます。
  • ブランドの表現：企業のブランドカラーやロゴをマーカーとして使用することで、ブランドアイデンティティを強調できます。

欠点

list-style-imageプロパティで使用する画像は、サイズを指定することができません。また、カスタム画像を作成して管理する必要があるため、画像の解像度やサイズに注意する必要があるというデメリットもあります。

::marker疑似要素を使用すると、リストマーカーに対して直接スタイルを適用することができます。

補足説明
::marker疑似要素セレクターは、displayプロパティの値がlist-itemである要素に自動的に生成されるリストマーカーを対象とするセレクターです。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image プロパティの使用例</title>
        <style>
            li::marker {
              content: "- "; /* マーカーの内容 */
              color: red; /* マーカーの色 */
              font-size: 1em; /* マーカーのサイズ */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
    </body>
</html>
::marker疑似要素が適用された状態

利点

::marker疑似要素は、マーカーの内容、色、サイズ、フォント、フォントの太さなどを直接指定できるという利点があります。

欠点

アニメーション効果など、一部のスタイルを指定する際に制約があるというデメリットがあります。

ブラウザ互換性

Safariのサポートは、content、color、およびfont-sizeに限定されています。

::marker疑似要素のブラウザ互換性
セレクター
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
::marker 86 86 68 11.2

caniuse.comで詳しい情報をご確認ください。

::before疑似要素を使用して、リストアイテムの前にカスタムコンテンツを追加し、マーカーとして機能させることができます。

b>補足説明
::before疑似要素セレクターは、選択した要素の実際のコンテンツの直前（before）に、最初の子要素としてスタイル可能な仮想要素をCSSで生成するセレクターです。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image プロパティの使用例</title>
        <style>
            li {
                list-style-type: none; /* ::before疑似要素でマーカーを代用する場合、既存のマーカーを消します。 */
            }
            li::before {
                content: "→"; /* カスタムマーカーの内容 */
                margin-right: 8px; /* マーカーとテキストの間隔 */
                display: inline-block;
                animation: before-bounce 1s infinite alternate; /* アニメーションの適用 */
            }
            @keyframes before-bounce {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-10px);
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
    </body>
</html>
::before疑似要素が適用された状態

利点

リストアイテムの前にカスタムコンテンツを追加するため、アニメーションやエフェクトなどを含むさまざまなスタイルやデザインを実装できるという利点があります。

欠点

list-style-type、list-style-image、::markerはマーカーの位置が自動的に指定されるのに対し、::beforeはカスタムコンテンツの位置指定が難しい場合があります。

ブラウザ互換性

::before疑似要素のブラウザ互換性
セレクター
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
::before 1 12 1.5 4

参考資料

関連項目