CSS 値関数

CSS 値関数は、 CSS プロパティで使用される値を返すために、特別なデータ処理や計算を呼び出す文です。 CSS の値関数はより複雑なデータ型を表し、返値を計算するためにいくつかの入力引数を取ることがあります。

構文

セレクター {
  プロパティ: 関数([引数]? [, 引数]!);
}

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

関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。カッコ内ではホワイトスペースを使用することができますが、オプションです。関数記法によって、複数の引数をカンマで区切っていたり、空白で区切っていたりします。

メモ: 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(): 数値に対して基本的な算術計算をを行います。
calc-size(): auto、fit-content、max-content などの内在サイズ値の計算を行います。これらの値は、calc() 関数では対応していません。

比較関数

min(): 値のリストのうち最小値を計算します。
max(): 値のリストのうち最大値を計算します。
clamp(): 最小値、中央値、最大値を取り、その中央値を計算します。

段階値関数関数

round(): 四捨五入法に基づき、丸めた数値を計算します。
mod(): ある数値を別の数で割ったときのモジュラス（除数と同じ符号を持つ）を計算します。
progress(): 2 つの値（開始値と終了値）の間にある値の位置を算出します。結果は 0 から 1 の間の数値で表され、開始値と終了値の間の進捗を表します。
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(): 画像をセピア調に変換します。

色関数

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

rgb(): ある色を、赤、緑、青とアルファ（透明度）の成分で定義します。
hsl(): ある色を、色相、彩度、明度とアルファ（透明度）の成分で定義します。
hwb(): ある色を、色相、白色度、黒色度の成分で定義します。
lch(): ある色を、明度、彩度、色相の成分で定義します。
oklch(): ある色を、明度、彩度、色相とアルファ（透明度）の成分で定義します。
lab(): ある色を、Lab 色空間の明度、a 軸距離と b 軸距離で定義します。
oklab(): ある色を、Lab 色空間の明度、a 軸距離と b 軸距離とアルファ（透明度）で定義します。
color(): 暗黙の sRGB 色空間ではなく、特定の色空間を指定します。
color-mix(): 指定された色空間の 2 つの色値を、指定された量だけ混合します。
contrast-color(): 指定された色に対して、色のコントラストが最大の色を返します。
device-cmyk(): 端末に依存しない方法で CMYK の色を定義します。
light-dark(): 現在の配色に基づいて、指定された 2 色のうちの 1 色を返します。
dynamic-range-limit-mix(): 指定したパーセント値で異なる dynamic-range-limit キーワードの組み合わせにより、最大輝度制限を生成します。

画像関数

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

グラデーション関数

linear-gradient(): 線形グラデーションは、想像上の線に沿って徐々に色を変化させます。
radial-gradient(): 放射グラデーションは、中心点（原点）から徐々に色を変化させます。
conic-gradient(): 扇形グラデーションは、円を描くように徐々に色を変化させます。
repeating-linear-gradient(): linear-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色経由点を繰り返します。
repeating-radial-gradient(): radial-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色経由点を繰り返します。
repeating-conic-gradient(): conic-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色経由点を繰り返します。

画像関数

image(): <image> を <url> 関数と同様の方法で定義しますが、画像の方向の指定、優先画像に対応していない場合の代替画像の指定などの機能を追加しています。
image-set(): 主に高ピクセル密度の画面のために、与えられたセットの中から最も適切な CSS 画像をブラウザーに選択させる方法です。
cross-fade(): 2 枚以上の画像を所定の透過度で合成するために使用することができます。
element(): 任意の HTML 要素から生成された <image> 値を定義します。
paint(): PaintWorklet で生成された <image> の値を定義します。

カウンター関数

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

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

図形関数

基本図形

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

circle(): 円を定義します。
ellipse(): 楕円を定義します。
inset(): 内部の矩形の図形を定義します。
rect(): 参照ボックスの上端と左端からの距離を使用して矩形の図形を定義します。
xywh(): 参照ボックスの上端と左端からの指定した距離と、矩形の幅と高さを指定して、矩形の図形を定義します。
polygon(): 多角形を定義します。
path(): SVG パス文字列を受け取り、シェイプを描画できるようにするために使用されます。
shape(): 描画する図形を定義するコマンドのカンマ区切りリストを受け入れます。

その他の図形関数

ray(): offset-path で有効であり、アニメーションする要素が従うことができる線の区間を定義します。
superellipse(): 楕円の曲率を定義します。<corner-shape-value> を指定するために使用できます。これは corner-shape およびその構成要素のプロパティや関連プロパティと組み合わせて使用されます。

参照関数

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

attr(): HTML 要素で定義された属性を使用します。
env(): ユーザーエージェントが定義した環境変数の値です。
if(): スタイルクエリー、メディアクエリー、機能クエリーの結果に応じて、プロパティ値を条件付きで設定します。
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 のようになります。