symbols()
symbols()
は CSS の関数で、カウンタースタイルをインラインで、 list-style
のようなプロパティの値で直接定義することができます。 @counter-style
とは異なり、 symbols()
は無名です (すなわち一度しか使用できません)。 @counter-style
よりも機能は劣りますが、より簡単でより短く書くことができます。
構文
css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
<symbols-type>
は以下のうちの一つで指定することができます。
cyclic
: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。numeric
: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。alphabetic
: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、0
がありません。symbolic
: このシステムでは値を循環させ、循環ごとに数を増やします(最初の循環では 1 回、 2 回目は 2 回、など)。fixed
: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。
例
HTML
html
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
CSS
css
ol {
list-style: symbols(cyclic "*" "†" "‡");
}
結果
仕様書
Specification |
---|
CSS Counter Styles Level 3 # symbols-function |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
@counter-style
list-style-type
および対応する一括指定であるlist-style