Jun.28th,2021
CSSの関数
＃
関数の表記方法
CSSにはいくつもの“関数表記(Functional Notations)”が定義されており、計算などによるより複雑な値や特別な処理を表現することができます。
関数の表記方法は“CSS Syntax Module”で定義されている“<function-token>”の構文に準拠した関数の名前と左括弧(“(”)、そのあとに続く1個または複数の引数と右括弧(“)”)からなります。左括弧の直後と右括弧の直前にはホワイトスペースの挿入が認められています。
関数によっては複数の引数とることができ、コンマ(“,”)もしくはホワイトスペースで区切って記述します。コンマの直前と直後にはホワイトスペースの挿入が認められています。
div {
color: rgb(50,60,70);
background: url(img/sample.png);
width: max(100% - 20px, 200px);
}
関数には数値形式のデータ型で計算のために使用できる数学関数、“<url>”値や“<color>”値などのデータ型として使用できる関数、プロパティごとに定義されている関数があります。また、“toggle()”関数はすべてのプロパティの値として使用することができます。
関数の表記方法と数学関数などの一部の関数はCSSの値についての仕様である“CSS Values and Units Module”で定義されていますが、多くの関数は他の仕様で定義されています。
＃
基本的な関数の一覧
| 関数 | 説明 |
|---|---|
| url() | |
src() |
|
| toggle() |
|
| attr() |
数学関数
| 関数 | 説明 |
|---|---|
calc() |
加減乗除の計算 |
| min() |
最小値を選択 |
| max() |
最大値を選択 |
| clamp() |
値の範囲を制限 |
| round() |
引数を指定した丸め幅で丸める |
| mod() |
引数の剰余 |
| rem() |
引数の剰余 |
| sin() |
引数の正弦 |
| cos() |
引数の余弦 |
| tan() |
引数の正接 |
| asin() |
引数の逆正弦 |
| acos() |
引数の逆余弦 |
| atan() |
引数の逆正接 |
| atan2() |
2個の引数の逆正接 |
| pow() |
引数のべき乗 |
| sqrt() |
引数の平方根 |
| hypot() |
引数の二乗和の平方根 |
| log() |
引数の対数 |
| exp() |
eのべき乗 |
| abs() |
引数の絶対値 |
| sign() |
引数の正負を調べる |
＃
ほかの関数
＃
＃
フィルター効果
| 関数 | 説明 |
|---|---|
| blur() | ガウスぼかしをかける |
| brightness() | 明度を変更する |
| contrast() | コントラストを変更する |
| drop-shadow() | 影をつける |
| grayscale() | グレースケールに変換する |
| hue-rotate() | 色相を変更する |
| invert() | 色を反転させる |
| opacity() | 透明度を変更する |
| saturate() | 彩度を変更する |
| sepia() | セピア調にする |
＃
＃
＃
＃
変形
2D変形関数
| 関数 | 説明 |
|---|---|
| matrix() | 二次元平面上で要素をアフィン変換する |
| translate() | 二次元平面上で要素を平行移動する |
| translateX() | X軸方向に要素を平行移動する |
| translateY() | Y軸方向に要素を平行移動する |
| scale() | 二次元平面上で要素を拡大もしくは縮小する |
| scaleX() | X軸方向に要素を拡大もしくは縮小する |
| scaleY() | Y軸方向に要素を拡大もしくは縮小する |
| rotate() | 二次元平面上で要素を回転する |
| skew() | 二次元平面上で要素をシアー変換する |
| skewX() | X軸方向に要素をシアー変換する |
| skewY() | Y軸方向に要素をシアー変換する |
3D変形関数
| 関数 | 説明 |
|---|---|
| matrix3d() | 三次元空間内で要素をアフィン変換する |
| translate3d() | 三次元空間内で要素を平行移動する |
| translateZ() | Z軸方向に要素を平行移動する |
| scale3d() | 三次元空間内で要素を拡大もしくは縮小する |
| scaleZ() | Z軸方向に要素を拡大もしくは縮小する |
| rotate3d() | 三次元空間内で要素を回転する |
| rotateX() | X軸を回転軸として要素を回転する |
| rotateY() | Y軸を回転軸として要素を回転する |
| rotateZ() | Z軸を回転軸として要素を回転する |
| perspective() | 要素から視点までの距離を変更する |
＃
＃
＃
＃
＃
