CSS カウンタースタイル

CSS カウンタースタイル (CSS Counter Styles) は CSS のモジュールの一つで、独自のカウンタースタイルを定義することができます。

リファレンス

プロパティ

@-規則

@counter-style

ガイド

CSS カウンターの使用
カウンターを使用して HTML 要素に番号を振る方法や、複雑なカウンターを実行する方法を説明します。

仕様書

仕様書 状態 備考
CSS Counter Styles Level 3 勧告候補 初回定義

ブラウザーの対応

@counter-style 規則

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@counter-styleChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
additive-symbols
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
fallback
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
negative
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
pad
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
prefix
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
range
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
speak-as
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
suffix
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
symbols
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
system
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 33IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 33Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

counter-increment プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
counter-incrementChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 9.2Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 25Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

counter-reset プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
counter-resetChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 9.2Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 25Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応