【CSS Modules】symbols()関数の使い方
symbols()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
symbols()関数は、CSS Counter Styles Level 3で導入された、カスタムカウンタースタイルを定義する際に使用する関数です。この関数は、リスト項目や序数表記で利用する独自のシンボルシーケンスを指定するために用いられます。
具体的には、CSSの@counter-styleアットルール内で、systemディスクリプタの値としてsymbols()関数を指定します。symbols()関数には、リストマーカーとして表示したい1つ以上の文字列シンボルをカンマ区切りで渡します。例えば、symbols("◎", "●")のように指定すると、最初のリスト項目には「◎」、次の項目には「●」、さらに次の項目には再び「◎」といったように、指定したシンボルが循環的に表示されます。
この関数が定義するカウンタースタイルシステムは、渡されたシンボルを順番に表示し、シンボルがすべて使われたら最初に戻って繰り返す「cyclic（循環的）」な振る舞いをします。これにより、標準のカウンタースタイル（例: decimal, lower-alphaなど）では表現できない、絵文字や特殊文字、任意の文字列などを使った、非常に柔軟で個性的なリストマーカーを簡単に作成できます。
symbols()関数を利用することで、Webページのデザインに合わせたオリジナリティあふれるリスト表示を実現し、コンテンツの視覚的な魅力を高めることが可能になります。これは、ユーザーインターフェースのデザイン性を向上させる上で非常に役立つ機能です。
公式リファレンス: symbols()
構文(syntax)
1symbols: "★" "◆" url("marker.png") "◇";
引数(parameters)
<string> | <image> ...
- <string>: シンボルとして使用する文字列を指定します。
- <image>: シンボルとして使用する画像ファイルのパスを指定します。
戻り値(return)
戻り値なし
戻り値はありません