Webデザイナーとしてのキャリアを積む中で、私たちは日々「ブラウザ間の差異」という壁にぶつかります。特に、リスト要素（`
- `や`
- `項目に自動付与される「番号（カウンター）」そのものを指し示します。
通常のCSSでは、`list-style-type`を使うことで「1, 2, 3…」や「a, b, c…」といった形式を指定できますが、その「番号の見た目」を個別にカスタマイズすることは困難でした。しかし、この擬似要素を使用することで、Firefox上においては、リストの番号に対してフォントサイズ、色、ウェイト、さらには装飾までをダイレクトに適用することが可能になります。
なぜ今、この擬似要素を知る必要があるのか
昨今のWebデザインでは、リストの番号を単なる「1. 2. 3.」として表示するのではなく、円で囲ったり、背景色をつけたり、あるいは番号だけを強調するような複雑なデザインが求められます。
従来の手法では、以下のようなコードを書くのが一般的でした。
ol {
list-style: none;
counter-reset: my-counter;
}
li::before {
counter-increment: my-counter;
content: counter(my-counter);
/* ここで装飾を行う */
}この手法は非常に優秀ですが、`::before`を使い切ってしまうというデメリットがあります。もし、リスト項目のテキストの前に別のアイコンを置きたい場合、`::before`が競合してしまいます。ここで『::-moz-list-number』の出番です。
::-moz-list-numberの具体的な使用例
例えば、リストの番号だけを赤色にし、フォントを太くしたい場合、以下のように記述できます。
li::-moz-list-number {
color: #ff0000;
font-weight: bold;
margin-right: 10px;
}このように記述するだけで、リストの構造（HTMLのセマンティクス）を崩すことなく、番号部分だけにスタイルを適用できます。これは、アクセシビリティの観点からも非常に優れています。スクリーンリーダーは依然として「リストの番号」として正しく認識しつつ、ビジュアル面ではデザイナーの意図を反映できるからです。
ブラウザ互換性とプログレッシブ・エンハンスメント
ここで一点、重要な注意点があります。この擬似要素は「-moz-」というプレフィックスが示す通り、Firefox専用の機能です。ChromeやSafariなどのWebKit系ブラウザでは動作しません。
「では、使えないではないか」と思われるかもしれません。しかし、シニアデザイナーの視点から言えば、これは「プログレッシブ・エンハンスメント（段階的機能強化）」の好例として捉えるべきです。
Webデザインにおいて、すべてのブラウザで1ピクセルの狂いもなく同じ表示をさせる時代は終わりつつあります。Firefoxユーザーにはより洗練された表示を提供し、他ブラウザでは標準的な表示を維持する。この「差」を許容し、活用する姿勢こそが、モダンなWeb開発には必要です。
代替案としての::marker擬似要素との比較
現在、CSSには`::marker`という標準化された擬似要素が存在します。これはFirefoxだけでなく、ChromeやSafariでもサポートされており、リストのマーカーを操作する標準的な手法となっています。
では、なぜ今さら『::-moz-list-number』なのか。それは、`::marker`で制御できるプロパティが限定的だからです。`::marker`では、一部のプロパティ（`content`や`color`など）しか変更できませんが、`::-moz-list-number`は、より広範なスタイリングの可能性を秘めています。
実践的なワークフローへの組み込み方
現場でこの技術を活用する際は、以下のような構成をおすすめします。
1. **ベーススタイル**: 全ブラウザ共通で`list-style-type`を設定する。
2. **拡張スタイル**: `@supports`ルールや、Firefox固有のセレクタを使用して、デザインをアップグレードする。/* 全ブラウザ共通 */
ol { list-style-type: decimal; }/* Firefoxのみの拡張 */
@supports selector(::moz-list-number) {
li::-moz-list-number {
font-family: ‘Georgia’, serif;
font-size: 1.2em;
color: var(–primary-color);
}
}このように、`@supports`を活用することで、コードの保守性を保ちつつ、Firefoxユーザーに対して最適な体験を提供できます。
まとめ：制約を楽しむのがプロのデザイナー
『::-moz-list-number』は、一見すると「特定のブラウザでしか動かないニッチな機能」に思えるかもしれません。しかし、Webデザインの真髄は、ブラウザが提供するネイティブな機能をいかに深く理解し、それらをデザインの味方につけるかにあります。
リストの番号という、HTMLの構造において不可欠な要素を、CSSの力でより美しく、より機能的に制御する。この探究心こそが、Webデザイナーとしてのスキルを一段上のレベルへ押し上げてくれます。
皆さんもぜひ、次のプロジェクトでこの擬似要素を試してみてください。Firefoxで自分のデザインを表示した瞬間、少しだけリッチになったリストを目にすることができるはずです。Webの進化は、こうした小さな機能の積み重ねによって支えられています。
技術は常に変化しますが、ユーザーに最適な体験を届けようとする私たちの姿勢は変わりません。これからも、ブラウザの仕様を深く読み解き、妥協のないデザインを追求していきましょう。
- `）のマーカー部分は、CSSで制御しようとすると一筋縄ではいかない領域です。多くのエンジニアが`list-style-type`の限界を感じ、`::before`擬似要素を使って独自に番号を振る手法を採用していることでしょう。
しかし、Firefoxには、ブラウザのネイティブなリスト番号を直接操作できる強力な擬似要素が存在します。それが今回解説する『::-moz-list-number』です。
::-moz-list-numberとは何か？
『::-moz-list-number』は、Firefox独自の擬似要素です。これは、`
- `要素内の各`
コメント