CSS 関数記法

CSS 関数記法は CSS 値の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。

構文

selector {
  property: functional-notation( [argument]? [, argument]! );
}

構文は、関数表記の名前から始まり、左括弧 ( で始まります。次に記法の引数が続き、関数は閉じ括弧 ) で終わります。

関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によって、複数の引数がカンマで区切られていたり、空白を使用していたりします。

座標変換関数

これらの関数は、 CSS の <transform-function> データ型が transform の値として使用される際に用いられます。

matrix(): 二次元の同次変換行列を記述します。
matrix3d(): 三次元の変換を 4 × 4 の同次行列で記述します。
perspective(): ユーザーと z=0 平面との間の距離を設定します。
rotate(): 要素を二次元平面上で特定の点を中心に回転します。
rotate3d(): 要素を三次元空間で特定の軸を中心に回転します。
rotatex(): 要素を水平軸を中心に回転します。
rotatey(): 要素を垂直軸を中心に回転します。
rotatez(): 要素を Z 軸を中心に回転します。
scale(): 要素を二次元平面上で拡大または縮小します。
scale3d(): 要素を三次元空間で拡大または縮小します。
scalex(): 要素を水平に拡大または縮小します。
scaley(): 要素を垂直に拡大または縮小します。
scalez(): 要素を Z 軸方向に拡大または縮小します。
skew(): 要素を二次元平面上で歪ませます。
skewx(): 要素を水平方向に歪ませます。
skewy(): 要素を垂直方向に歪ませます。
translate(): 要素を二次元平面上で平行移動させます。
translate3d(): 要素を三次元空間で平行移動させます。
translatex(): 要素を水平方向に平行移動させます。
translatey(): 要素を垂直方向に平行移動させます。
translatez(): 要素を Z 軸方向に平行移動させます。

数学関数

数学関数は、 CSS の数値を数式として記述することができるものです。

calc(): CSS の数値に対して基本的な算術演算を行うことができる数学関数です。
clamp(): 最小値、中央値、最大値を取り、その中央値の計算を表す比較関数です。
max(): 値のリストの最大値を表す比較関数です。
min(): 値のリストの最小値を表す比較関数です。
abs() (en-US) Experimental: 計算結果を受け取り、絶対値を返します。
acos() Experimental: An inverse trigonometric function the angle returned must be normalized to the range [0deg, 180deg];.
asin() Experimental: An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].
atan() Experimental: An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].
atan2() Experimental: Contains two comma-separated calculations, A and B. A and B can resolve to any <number>, <dimension>, or <percentage>, but must have the same type, or else the function is invalid.
cos() Experimental: Contains a single calculation which must resolve to either a <number> or an <angle>.
exp() Experimental: Contains one calculation which must resolve to a <number>, and returns the same value as pow(e, A) as a <number>.
hypot() Experimental: Contains one or more comma-separated calculations, and returns the length of an N-dimensional vector with components equal to each of the calculations.
log() Experimental: Contains one or two calculations (representing the value to be logarithmed, and the base of the logarithm, defaulting to e), which must both resolve as a <number>, and returns the logarithm base B of the value A, as a <number>.
mod() Experimental: A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.
pow() Experimental: Contains two comma-separated calculations A and B, both of which must resolve as a <number>, and returns the result of raising A to the power of B, returning the value as a <number>.
rem() Experimental: A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.
round() Experimental: Contains an optional rounding strategy, and two calculations A and B, and returns the value of A, rounded according to the rounding strategy, to the nearest integer multiple of B either above or below A.
sign() (en-US) Experimental: 計算結果を取り、数値が負であれば -1 を返し、数値が正であれば +1 を返し、数値が 0⁺ であれば 0⁺ を返し、数値が 0⁻ であれば 0⁻ を返します。
sin() Experimental: Contains a single calculation which must resolve to either a <number> or an <angle>.
sqrt() Experimental: Contains a single calculation which must resolve to a <number>, and returns the square root of the value as a <number>.
tan() Experimental: Contains a single calculation which must resolve to either a <number> or an <angle>.

フィルター関数

<filter-function> は CSS のデータ型で、入力画像の外見を変更することができるグラフィック効果を表します。 filter および backdrop-filter プロパティで使用されます。

blur(): 画像をぼかします。
brightness(): 画像を明るくしたり暗くしたりします。
contrast(): 画像のコントラストを上げたり下げたりします。
drop-shadow(): 画像の背後にドロップシャドウを適用します。
grayscale(): 画像をグレイスケールに変換します。
hue-rotate(): 画像の色相を全体的に変更します。
invert(): 画像の色を反転させます。
opacity(): 画像を半透明にします。
saturate(): 入力画像の彩度を上げたり下げたりします。
sepia(): 画像をセピア調に変換します。

色関数

様々な色の表現を指定する関数です。 <color> が有効な場所であればどこでも使用できます。

color() (en-US) Experimental: （他のほとんどの色関数が操作する暗黙の sRGB 色空間ではなく）特定の指定された色空間で色を指定できるようにします。
color-mix() (en-US) Experimental: 2 つの color 値を受け取り、それらを指定された色空間で与えられた量だけ混合した結果を返します。
color-contrast() (en-US) Experimental: color 値を受け取り、他の color 値のリストと比較し、リストの中から最もコントラストの強いものを選択します。
device-cmyk() (en-US) Experimental: CMYK 色をデバイスに依存しない方法で表現するために使用します。
hsl() (en-US): HSL カラーモデルは、色相、彩度、明度の各成分によって色を定義します。オプションのアルファ成分は、色の透明度を表します。
hsla() (en-US): HSL カラーモデルは、色相、彩度、明度の各成分によって色を定義します。オプションのアルファ成分は、色の透明度を表します。
hwb() (en-US) Experimental: HWB (Hue-Whiteness-Blackness の略) も HSL と同様に色を指定する方法の一つです。
lab() (en-US) Experimental: Lab カラーはデバイスに依存せず、色の物理的な測定値を規定するものです。
lch() (en-US) Experimental: LCH カラーはデバイスに依存せず、彩度と色相の極座標で色を指定します。
rgb() (en-US): RGB カラーモデルは、赤、緑、青の 3 つの成分によって色を定義します。オプションのアルファ成分は、色の透明度を表します。
rgba() (en-US): RGB カラーモデルは、赤、緑、青の 3 つの成分によって色を定義します。アルファ成分は、色の透明度を表します。

画像関数

これらの関数は、プロパティの値として <image> が有効な場所ならばどこでも使用できます。

conic-gradient(): 扇形グラデーションは、円を描くように徐々に色を変化させます。
image() Experimental: <image> を url() 関数と同様の方法で定義しますが、画像の方向の指定、優先画像に対応していない場合の代替画像の指定などの機能を追加しています。
image-set() Experimental: 主に高ピクセル密度の画面のために、与えられたセットの中から最も適切な CSS 画像をブラウザーに選択させる方法です。
linear-gradient(): 線形グラデーションは、想像上の線に沿って徐々に色を変化させます。
radial-gradient(): 放射グラデーションは、中心点（原点）から徐々に色を変化させていきます。
repeating-linear-gradiant(): linear-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。
repeating-radial-gradient(): radial-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。
repeat-conic-gradiant(): conic-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。
cross-fade(): 2 枚以上の画像を所定の透過度で合成するために使用することができます。
element(): 任意の HTML 要素から生成された <image> 値を定義します。
paint(): PaintWorklet で生成された <image> の値を定義します。

カウンター関数

カウンター関数は一般に content プロパティと共に使われますが、理論的には <string> に対応しているところならば使用することができます。

counter(): その名前のカウンターが存在すれば、現在の値を示す文字列を返します。
counters(): 入れ子のカウンターを有効にし、指定されたカウンターが存在すれば、その現在の値を表す文字列を連結して返します。
symbols(): カウンターのスタイルをインラインで、直接定義することができます。

フォント関数

font-variant-alternates プロパティは代替字形の使用を制御し、以下の関数がこのプロパティの値になります。

stylistic(): This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value salt, like salt 2.
styleset(): This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ssXY, like ss02.
character-variant(): This function enables specific stylistic alternatives for characters. It is similar to styleset(), but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value cvXY, like cv02.
swash(): This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh, like swsh 2 and cswh 2.
ornaments(): This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm, like ornm 2.
annotation(): This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value nalt, like nalt 2.

シェイプ関数

以下の関数は <basic-shape> データ型の値として使用することができます。これは clip-path, offset-path, shape-outside の各プロパティで使用されます。

circle(): 円を定義します。
ellipse(): 楕円を定義します。
inset(): 内部の長方形を定義します。
polygon(): 多角形を定義します。
path() (en-US): SVG パス文字列を受け取り、シェイプを描画できるようにするために使用されます。

参照関数

以下の関数は、他の場所で定義された値をプロパティの値として参照するために使用されます。

attr(): 選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。
env(): ユーザーエージェントが定義した環境変数の値を CSS に挿入するために使用することができます。
url(): 値としてファイルを含めるために使用します。
var(): 他のプロパティの値の一部に代わってカスタムプロパティの値を挿入できます。

CSS グリッド関数

以下の関数は、CSS グリッドを定義するために使用されます。

fit-content(): 指定された寸法を min(max-content, max(min-content, 引数)) の式に従って有効な範囲の寸法に収めます。
minmax(): 指定された寸法を min(max-content, max(min-content, 引数)) の式に従って有効な範囲の寸法に収めます。
repeat(): 指定された寸法を min(max-content, max(min-content, 引数)) の式に従って有効な範囲の寸法に収めます。

仕様書

仕様書	状態	備考
CSS Values and Units Module Level 4	編集者草案	`toggle()`, `attr()`, `calc()`, `min()`, `max()`, `clamp()`, `round()`, `mod()`, `rem()`, `mod()`, `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`, `pow()`, `sqrt()`, `hypot()`, `log()`, `exp()`, `abs()`, `sign()` の関数表記を追加。
CSS Values and Units Module Level 3	勧告候補	`calc()` の関数表記を追加。
CSS Color Module Level 4	草案	`rgb()`, `rgba()`, `hsl()`, `hsla()` の関数表記にカンマなしの構文を追加。 `rgb()` と `hsl()` にアルファ値を許可し、 `rgba()` と `hsla()` をそれらの (非推奨の) 別名とした。 `hwb()`, `device-cmyk()`, `color()` 関数を追加。
CSS Color Module Level 3	勧告	`rgba()`, `hsl()`, `hsla()` の関数表記を追加。
CSS Images Module Level 4	草案	`element()`, `image()`, `image-set()`, `conic-gradient()` の関数表記を追加。