CSS ファンクションリファレンスマニュアル

CSS関数

CSS関数は、値の計算、文字列の操作、色、複雑なグラデーションや形状の作成などに使用できます。

CSS関数は、さまざまなCSS属性の値としてよく使用されます。

関数 説明
acos() −1と1の間の数の逆余弦値を返します。
asin() −1と1の間の数の逆正弦値を返します。
atan() −∞と∞の間の数の逆三角関数を返します。
atan2() −∞と∞の間の2つの値の逆三角関数を返します。
attr() 選択された要素の属性値を返します。
blur() 要素にぼかし効果を適用します。
brightness() 要素の明るさ（明るくしたり暗くしたり）を調整します。
calc() CSS属性値を決定する計算を許可します。
circle() 円を定義します。
clamp() 最小値と最大値の間でビューポートのサイズに応じて調整される値を設定します。
color() 特定の指定された色空間で色を指定することができます。
color-mix() 指定された色空間で、指定された割合で2つの色値を混ぜます。
conic-gradient() 錐形グラデーションを生成します。
contrast() 要素のコントラストを調整します。
cos() 角度の余弦値を返します。
counter() 命名カウンタの現在の値を返します。
counters() 命名およびネストされたカウンタの現在の値を返します。
cubic-bezier() 三次ベ塞尔曲線を定義します。
drop-shadow() 画像に投影効果を適用します。
ellipse() 楕円を定義します。
exp() Eの指定された数xのべき乗(Ex)
fit-content() 要素のサイズを内容に応じて調整することができます。
grayscale() grayscale()
画像をグレースケールに変換。 hsl() / hsla()
色相-饱和度-亮度モデル(HSL)で色を定義；オプションでalpha成分を含む。 hue-rotate()
要素に色回転を適用。 hwb()
色相-白度-黒度モデル(HWB)で色を定義；オプションでalpha成分を含む。 hypot()
引数の平方和の平方根を返します。 inset()
参照フレームの各辺に指定された内嵌距離を保つ矩形を定義。 invert()
画像の色を反転。 lab()
CIE Lab色空間で色を指定。 lch()
LCH（明度-色度-色相）色空間で色を指定。 light-dark()
浅色トーンを設定した場合、一つ目の値を返し、二つの色値を設定する。
ユーザーがダークトーンを設定した場合、二つ目の値を返します。 linear-gradient()
線形グラデーションを作成。 log()
指定された数の自然対数（Eを底とする）または指定された底の対数を返します。 matrix()
六値マトリックスで2D変換を定義。 matrix3d()
4x4マトリックスで3D変換を定義。 max()
カンマ区切りの値リストの最大値を属性値として使用。 カンマ区切りの値リストの最小値を属性値として使用。
minmax() 最小値以上で最大値以下の範囲（CSSグリッド用）を定義。
mod() 一つの数をもう一つの数で割った余りを返します。
oklab() OKLAB色空間で色を指定。
oklch() OKLCH色空間で色を指定。
opacity() 要素に不透明度効果を適用。
perspective() 3D変換要素に透視視点を定義。
polygon() 多角形を定義。
pow() 一つの数(x)をもう一つの数(y)の乗の値を返します。
radial-gradient() 径向グラデーションを作成。
ray() アニメーション要素が従うべきオフセットパスの線分を定義。
rem() 一つの数をもう一つの数で割った余りを返します。
repeat() グリッド内で一組の列や行を重複。
repeating-conic-gradient() 重複錐形グラデーション。
repeating-linear-gradient() 重複線形グラデーション。
repeating-radial-gradient() 重複径向グラデーション。
rgb() / rgba() 赤-緑-青モデル (RGB) を使用して色を定義します；オプションで alpha ボールを含めることができます。
rotate() 要素の 2D 旋回を定義します。
rotate3d() 要素の 3D 旋回を定義します。
rotateX() 要素が x 軸（水平）を中心に 3D 旋回するように定義します。
rotateY() 要素が y 軸（垂直）を中心に 3D 旋回するように定義します。
rotateZ() 要素が z 軸を中心に 3D 旋回するように定義します。
round() 指定された四捨五入方針に従って数値を四捨五入します。
saturate() 要素の飽和度（色の強度）を調整します。
scale() 要素の 2D 拡大を定義します。
scale3d() 要素の 3D 拡大を定義します。
scaleX() 要素を水平に拡大（幅）します。
scaleY() 要素を垂直に拡大（高さ）します。
sepia() 画像をモノクロに変換します。
sin() 数（角度）の正弦を返します。
skew() 要素を x 軸および y 軸に沿って傾斜します。
skewX() 要素を x 軸に沿って傾斜します。
skewY() 要素を y 軸に沿って傾斜します。
sqrt() 数の平方根を返します。
steps() アニメーションにステップタイマー関数を作成します。
tan() 数の正接を返します。
translate() 要素を x 軸および y 軸に沿って再配置することを許可します。
translateX() 要素を x 軸に沿って再配置することを許可します。
translateY() 要素を y 軸に沿って再配置することを許可します。
url() スタイルシートにファイルを含めることを許可します。
var() カスタム属性の値を挿入します。