CSS 値関数

selector {
  property: function([argument]? [, argument]!);
}

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

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

CSS における <transform-function> データ型 は、座標変換の出現を表します。 transform の値として使用されます。

translateX()

要素を水平方向に平行移動させます。

translateY()

要素を垂直方向に平行移動させます。

translateZ()

要素を Z 軸方向に平行移動させます。

translate()

要素を二次元平面上で平行移動させます。

translate3d()

要素を三次元空間で平行移動させます。

rotateX()

要素を水平軸を中心に回転します。

rotateY()

要素を垂直軸を中心に回転します。

rotateZ()

要素を Z 軸を中心に回転します。

rotate()

要素を二次元平面上で特定の点を中心に回転します。

rotate3d()

要素を三次元空間で特定の軸を中心に回転します。

scaleX()

要素を水平に拡大または縮小します。

scaleY()

要素を垂直に拡大または縮小します。

scaleZ()

要素を Z 軸方向に拡大または縮小します。

scale()

要素を二次元平面上で拡大または縮小します。

scale3d()

要素を三次元空間で拡大または縮小します。

skewX()

要素を水平方向に歪ませます。

skewY()

要素を垂直方向に歪ませます。

skew()

要素を二次元平面上で歪ませます。

matrix()

二次元の同次変換行列を記述します。

matrix3d()

三次元の変換を 4 × 4 の同次行列で記述します。

perspective()

ユーザーと z=0 平面との間の距離を設定します。

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

下記の各ページには、数学関数の構文、ブラウザー互換性データ、例などの詳細情報が格納されています。CSS 数学関数の全体的な紹介は、CSS 数学関数の使用を参照してください。

calc()

CSS の数値に対して基本的な算術演算を行ういます。

min()

値のリストのうち最小値を計算します。

max()

値のリストのうち最大値を計算します。

clamp()

最小値、中央値、最大値を取り、その中央値を計算します。

round()

四捨五入法に基づき、丸めた数値を計算します。

mod()

ある数値を別の数で割ったときのモジュラス（除数と同じ符号を持つ）を計算します。

rem()

ある数値を別の数で割ったときの余り（被除数と同じ符号を持つ）を計算します。

sin()

数値の三角正弦を計算します。

cos()

数値の三角余弦を計算します。

tan()

数値の三角正接を計算します。

asin()

数値の三角逆正弦を計算します。

acos()

数値の三角逆余弦を計算します。

atan()

数値の三角逆正接を計算します。

atan2()

平面上の2つの数の三角逆正接を計算します。

pow()

底のべき乗を計算します。

sqrt()

数値の平方根を計算します。

hypot()

引数の 2 乗の和の平方根を計算します。

log()

数値の対数を計算します。

exp()

eのべき乗を計算します。

abs()

数値の絶対値を計算します。

sign()

数値の符号（正または負）を計算します。

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

blur()

画像のガウスぼかしを大きくします。

brightness()

画像を明るくしたり暗くしたりします。

contrast()

画像のコントラストを上げたり下げたりします。

drop-shadow()

画像の背後にドロップシャドウを適用します。

grayscale()

画像をグレイスケールに変換します。

hue-rotate()

画像の色相を全体的に変更します。

invert()

画像の色を反転させます。

opacity()

画像を半透明にします。

saturate()

入力画像の彩度を上げたり下げたりします。

sepia()

画像をセピア調に変換します。

<color> CSS データ型は、様々な色の表現を指定します。

rgb()

ある色を、赤、緑、青とアルファ（透明度）の成分で定義します。

hsl()

ある色を、色相、彩度、明度とアルファ（透明度）の成分で定義します。

hwb()

ある色を、色相、白色度、黒色度の成分で定義します。

lch()

ある色を、明度、彩度、色相の成分で定義します。

oklch()

ある色を、明度、彩度、色相とアルファ（透明度）の成分で定義します。

lab()

ある色を、明度、 lab 色空間の a 軸距離と b 軸距離で定義します。

oklab()

ある色を、明度、 lab 色空間の a 軸距離と b 軸距離とアルファ（透明度）で定義します。

color()

暗黙の sRGB 色空間ではなく、具体的な色空間を指定します。

color-mix()

指定された色空間の 2 つの色値を、指定された量だけ混合します。

color-contrast() Experimental

基本色の値と比較しして、色のリストから最も高い色のコントラストを選択します。

device-cmyk() Experimental

端末に依存しない方法で CMYK の色を定義します。

light-dark() Experimental

現在の配色に基づいて、指定された 2 色のうちの 1 色を返します。

<image> は CSS のデータ型で、画像やグラデーションのグラフィック表現を提供します。

linear-gradient()

線形グラデーションは、想像上の線に沿って徐々に色を変化させます。

radial-gradient()

放射グラデーションは、中心点（原点）から徐々に色を変化させていきます。

conic-gradient()

扇形グラデーションは、円を描くように徐々に色を変化させます。

repeating-linear-gradient()

linear-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色経由点を繰り返します。

repeating-radial-gradient()

radial-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色経由点を繰り返します。

repeating-conic-gradient()

conic-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色経由点を繰り返します。

image() Experimental

<image> を url() 関数と同様の方法で定義しますが、画像の方向の指定、優先画像に対応していない場合の代替画像の指定などの機能を追加しています。

image-set()

主に高ピクセル密度の画面のために、与えられたセットの中から最も適切な CSS 画像をブラウザーに選択させる方法です。

cross-fade()

2 枚以上の画像を所定の透過度で合成するために使用することができます。

element() Experimental

任意の HTML 要素から生成された <image> 値を定義します。

paint()

PaintWorklet で生成された <image> の値を定義します。

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

counter()

その名前のカウンターが存在すれば、現在の値を示す文字列を返します。

counters()

入れ子のカウンターを有効にし、指定されたカウンターが存在すれば、その現在の値を表す文字列を連結して返します。

symbols()

カウンターのスタイルをインラインで、直接定義することができます。

<basic-shape> は CSS のデータ型で、グラフィックの図形を表します。これは clip-path, offset-path, shape-outside の各プロパティで使用されます。

circle()

円を定義します。

ellipse()

楕円を定義します。

inset()

内部の長方形を定義します。

rect() Experimental

参照ボックスの上端と左端からの距離を使用して長方形図形を定義します。

xywh() Experimental

参照ボックスの上端と左端からの指定した距離と、長方形の幅と高さを指定して、長方形の図形を定義します。

polygon()

多角形を定義します。

path()

SVG パス文字列を受け取り、シェイプを描画できるようにするために使用されます。

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

attr()

選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。

env()

ユーザーエージェントが定義した環境変数の値を CSS に挿入するために使用することができます。

url()

値としてファイルを含めるために使用します。

var()

他のプロパティの値の一部に代わってカスタムプロパティの値を挿入できます。

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

fit-content()

指定された寸法を min(最大寸法, max(最小寸法, 引数)) の式に従って有効な範囲の寸法に収めます。

minmax()

min 以上、 max 以下の寸法の範囲を定義します。

repeat()

トラックリストの繰り返し断片を表し、多数の列または行を繰り返しパターンで作成できます。

CSS フォント関数は font-variant-alternates プロパティで使用し、選択字形の使用を制御します。

stylistic()

個々の文字に対するスタイル選択を有効にします。引数は数字に割り当てられたフォント固有の名前です。これは OpenType の値 salt に対応し、salt 2 のようになります。

styleset()

文字の集合に対するスタイル選択を有効にします。引数はフォントに固有の名前で、数字に割り当てられたものです。これは OpenType の値 ssXY に対応し、例えば ss02 のようになります。

character-variant()

文字に特定のスタイル選択を有効にします。これは styleset() と似ていますが、設定した文字に対して一貫性のある字形を作成するわけではありません。個々の文字は独立した、必ずしも一貫性のあるスタイルを持っているわけではありません。引数はフォント固有の名前で、数字に割り当てられたものです。これは OpenType の値 cvXY に対応し、例えば cv02 のようになります。

swash()

swash 字形を有効にします。引数は数字に割り当てられたフォント固有の名前です。これは OpenType の値 swsh と cswh に対応し、例えば swsh 2 や cswh 2 のようになります。

ornaments()

フルーロンや他にもディングバット字形などの装飾を有効にします。引数は数字に割り当てられたフォント固有の名前です。これは OpenType の値 ornm に対応し、例えば ornm 2 のようになります。

annotation()

丸付き数字や反転文字などの注記を有効にします。引数は数字に割り当てられたフォント固有の名前です。これは OpenType の値 nalt に対応し、例えば nalt 2 のようになります。

以下の関数は、トランジションとアニメーションのプロパティで値として使用します。

linear()

点間を直線的に補間するイージング関数です。

cubic-bezier()

3 次ベジェ曲線を定義するイージング関数です。

steps()

トランジションに沿って指定した数の段階を反復処理し、各段階を同じ時間の長さで表示します。

以下の関数は animation-timeline プロパティの値として使用します。これらの詳細については animation-timeline を参照してください。

scroll()

要素の animation-timeline に 無名スクロール進行タイムライン を設定します。

view()

要素の animation-timeline を 無名ビュー進行タイムライン に設定します。

• CSS 値と単位
• CSS 入門: 値と単位