CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでリストの箇条書き（ビュレット）の色だけを変更する方法

CSSでリストの箇条書き（ビュレット）の色を変更したい場合、::before 疑似要素を使う方法が便利です。通常の color プロパティではテキストごと色が変わってしまうため、「マーカーだけ別の色にしたい」というケースでは、一度デフォルトの箇条書きを消してから独自のビュレットを生成するのが定番のテクニックです。

実装のポイント

仕組みはシンプルで、以下の2ステップで実現できます。

  • list-style: none; … デフォルトの箇条書きマーカーを非表示にする
  • li::before … 疑似要素でビュレット（Unicode の「\2022」＝ • ）を生成し、color プロパティで好みの色を指定する

また、display: inline-block; と width: 1em;、margin-left: -1em; を組み合わせることで、ビュレットの位置を通常の箇条書きと同じように調整しています。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    ul {
        list-style: none;
    }
    ul li{
        font-size: 20px;
        font-weight: 500;
    }
    ul li::before {
        content: "\2022";
        color: rgb(86, 18, 117);
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }
</style>
</head>
<body>
<h1>リストの箇条書きの色を変更する例</h1>
<ul>
<li>ラクダ</li>
<li>ヤギ</li>
<li>キリン</li>
<li>ライオン</li>
</ul>
</body>
</html>

出力結果

上記のコードを実行すると、以下のように箇条書きのマーカーだけが紫（rgb(86, 18, 117)）で太字表示され、テキスト部分は元の色のまま維持されます。

CSSでリストの箇条書き（ビュレット）の色だけを変更する方法

この手法なら、ビュレットのサイズや余白も自由に調整できるため、デザインに合わせた柔軟なカスタマイズが可能です。

  1. CSSの::markerセレクターでリストの箇条書きマーカーの色を変更する方法

    ::markerセレクターとはCSSの::marker擬似要素は、リスト項目（<li>）に表示される箇条書きマーカーや番号に対して個別にスタイルを適用できるセレクターです。通常、マーカーの色はテキストの色に連動しますが、::markerを使えばマーカーだけの色やフォントサイズを自由に変更できます。構文CSS ::markerセレクターの基本構文は以下の通りです。Selector::marker { attribute: /*値*/; }例1：基本的な使い方以下の例では、ul要素のリストスタイルを「circle」に設定し、li::markerに対して緑色を指定しています。&l

  2. CSSでテキストボックスのプレースホルダーの色を変更する方法

    Webフォームの入力欄に表示されるプレースホルダー(仮置きテキスト)の色は、CSSの ::placeholder 疑似要素を使うことで自由に変更できます。デフォルトのグレー表示から、サイトのデザインに合わせた色へとカスタマイズすることで、フォームの見栄えやユーザビリティを向上させることができます。::placeholder疑似要素の基本構文::placeholder 疑似要素の書き方は以下のとおりです。::placeholder { 属性: 値; }例1:特定の入力欄だけプレースホルダーの色を変える次の例では、:last-child セレクタと組み合わせることで、2つ目のinput要素の