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

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

::markerセレクターとは

CSSの::marker擬似要素は、リスト項目（<li>）に表示される箇条書きマーカーや番号に対して個別にスタイルを適用できるセレクターです。通常、マーカーの色はテキストの色に連動しますが、::markerを使えばマーカーだけの色やフォントサイズを自由に変更できます。

構文

CSS ::markerセレクターの基本構文は以下の通りです。

Selector::marker {
    attribute: /*値*/;
}

例1：基本的な使い方

以下の例では、ul要素のリストスタイルを「circle」に設定し、li::markerに対して緑色を指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style: circle;
            font-size: 1.2em;
         }
         li::marker {
            color: green;
         }
      </style>
   </head>
   <body>
      <h2><strong>TMNT</strong></h2>
      <ul>
         <li>Raphael</li>
         <li>Donatello</li>
         <li>Michaelangelo</li>
         <li>Leonardo</li>
      </ul>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。リストのテキストは黒色のまま、マーカー（●）のみが緑色で表示されます。

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

例2：レイアウトと組み合わせた応用例

次の例では、list-styleを「square」に設定し、li要素にfloatとbox-shadowを組み合わせて横並びのカード風レイアウトを作成しています。さらに、li::markerでマーカーの色を緑に指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style: square;
            overflow: hidden;
         }
         li::marker {
            color: green;
         }
         li {
            width: 15%;
            margin: 2%;
            float: left;
            box-shadow: inset 2px 0px 10px lightblue;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>ting</li>
         <li>tong</li>
         <li>ding</li>
         <li>dong</li>
      </ul>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。各リスト項目がカード状に並び、四角形のマーカーだけが緑色になっていることが確認できます。

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

まとめ

::markerセレクターを使用することで、リスト全体のデザインを損なうことなく、箇条書きマーカーの色だけを簡単にカスタマイズできます。対応ブラウザも近年増えており、モダンなWebサイト制作において便利なテクニックの一つです。

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

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

  2. CSSのcaret-colorプロパティでキャレット（テキストカーソル）の色を変更する方法

    テキスト入力時に表示される挿入キャレット（テキストカーソル）の色を変更するには、CSSのcaret-colorプロパティを使用します。このプロパティを使うことで、input要素やtextarea要素などの編集可能な要素において、デフォルトの黒いカーソルを任意の色にカスタマイズできます。caret-colorプロパティの基本caret-colorプロパティには、以下のような値を指定できます。任意の色：red、chartreuse、#ff0000 などの色名やカラーコードtransparent：キャレットを非表示にする（透明化）auto：ブラウザのデフォルト設定に従う例1：キャレットの色を変更する