CSSの@counter-styleを利用してリスト要素のマーカーに「・（中黒）」を表示する

はじめに

Webデザインにおいて、リスト要素のマーカーを「・（中黒）」にしたい場面は意外と多くあります。
特に日本語コンテンツでは、標準のdiscマーカーでは大きすぎ、デザインに馴染まないことも珍しくありません。

これまでは、::before擬似要素で「・」を表示したり、マージンを手動で調整する必要がありましたが、CSSの@counter-styleを使えば、シンプルかつ柔軟性高く実現できます。

この記事では、CSSの@counter-styleを利用して、リストマーカーに「・（中黒）」を表示する方法を紹介します。

実装方法

完成コードはこちら

@counter-style middle-dot {
  system: cyclic;
  symbols: ・;
  suffix: " ";
  fallback: disc;
}

ul {
  list-style: middle-dot;
}

これだけで、リストマーカーが「・（中黒）」になります。

実装サンプル

なぜ@counter-styleを使うのか？

従来、「・（中黒）」マーカーを作ろうとすると、以下のような方法が使われていました。

• li::beforeでcontent: "・"を表示する
• CSSで小さな円を描画してマーカー代わりにする
• 画像を使ってマーカーを表現する

しかし、これらの方法はそれぞれに問題があります。

• 改行時にインデントがずれる
• テキストサイズの変更に追従しにくい
• 余白調整が個別に必要になる
• 保守コストが高くなる

@counter-styleを使えば、これらの問題をすべて回避できます。

ブラウザの標準的なリスト挙動（インデント、改行、行間、フォント連動）をそのまま使いながら、マーカーだけを自然に置き換えることができるからです。

入れ子やマーカー色変更、文字サイズ変更のサンプル

対応ブラウザ

Baseline 2023 Newly availableです。
Can I use @counter-style

safariはiOS17でサポートされたため、iOS16止まりのiPhone8,Xは対応していません。

ただし、@counter-styleが無効な場合は、list-style-typeが不明扱いになり、自動的にdisc（黒丸）マーカーにフォールバックします。
またsymbols: ・;が表示できない環境の場合もフォールバックでdiscを指定することが可能です。

そのため、特別なフォールバック設定をしなくても、最低限の可読性は確保できます。

まとめ

リストのマーカーは、基本的にはlist-style: disc（標準の黒丸）で対応するのが理想です。
とはいえ、デザイナーとの調整が難航し、「・（中黒）」での対応が求められる場面も少なくありません。

そんな場合でも、今回紹介した@counter-styleを使えば、無理なく自然に中黒マーカーへ切り替えられます。
標準的な挙動を保ったままデザイン要件にも柔軟に応えられるので、必要に応じて活用してみてください。