Jun.26th,2021
CSSの数学的表現
CSSの数学的表現
“CSS Values and Units Module”では様々な“数学的表現(Mathematical Expressions)”が定義されており、加法(“+”)、減法(“-”)、乗法(“*”)、除法(“/”)の演算子を用いた数式や“数学関数(Math Functions)”を用いて複雑な値を表すことができます。
数学的表現は以下の値が使用できる場所で使用できます。
- “<length>”値
- “<frequency>”値
- “<angle>”値
- “<time>”値
- “<flex>”値
- “<resolution>”値
- “<percentage>”値
- “<number>”値
- “<integer>”値
数式
基本的な数式の記述方法
数学関数の引数には加法(“+”)、減法(“-”)、乗法(“*”)、除法(“/”)の演算子を用いた数式を使用することができます。
数式の計算は一般的な演算子の優先順位に基づいて行われます。つまり、乗算と除算は加算と減算よりも優先して行われ、それ以外は左から右へ順番に計算します。
誤った計算順序
1 + 2 * 3 = 9
正しい計算順序
1 + 2 * 3
= 1 + (2 * 3)
= 7
数式には“<number>”値や“<dimension>”値を演算子で組み合わせて記述します。また、括弧(“(”と“)”)を用いて計算の順番を明確化することもできます。
すべての数学関数で数式を引数として直接(“calc()”関数を使用せずに)記述することができます。また、数学関数の中に数学関数を入れ子にすることもできます。
max(100% - 20px, clamp(200px,1vw,500px) - 10px)
加算記号(“+”)と減算記号(“-”)と数字が連続すると“<number>”値として解釈されるため、これらの記号の前後にはホワイトスペースを挿入しなければなりません。
加算
calc(100% + 50px)
減算
calc(100% - 50px)
乗算
calc(100% * 2)
除算
calc(100% / 2)
複雑な数式
calc((100% + 50px) * 2)
計算結果が当てはまるデータ型
“<length>”値や“<number>”値など、多くのデータ型を表すことができる数学的表現ですが、常にどのデータ型でも表すことができるわけではなく、どの型の値となるかは数式に含まれる値によって判断されます。
例えば、“<dimension>”値が含まれる数式は単位によって判断されます。“px”が含まれればその数式は通常“<length>”値として扱われます。
使用される数学関数自体もデータ型の判断に影響します。
- “calc()”関数、“abs()”関数
- 引数となる数式の型によって判断されます。
- “min()”関数、“max()”関数、“clamp()”関数
- 引数となる複数の数式の型によって判断されます。
- “sign()”関数、“sqrt()”関数、“log()”関数、“exp()”関数
- “<number>”値となります。
- “sin()”関数、“cos()”関数、“tan()”関数
- “<number>”値となります。
- “asin()”関数、“acos()”関数、“atan()”関数、“atan2()”関数
- “<angle>”値となります。
- “pow()”関数、“sqrt()”関数、“log()”関数、“exp()”関数
- “<number>”値となります。
- “hypot()”関数、“round()”関数、“mod()”関数、“rem()”関数
- 引数となる複数の数式の型によって判断されます。
なお、データ型の判断は計算の組み合わせによっても変わることがあります。
数学関数の一覧
