このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

数学的表現

記事Jun.26th,2021
CSSの値として使用できるCSSの数学的表現と数学関数について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSの数学的表現

CSSの数学的表現

“CSS Values and Units Module”では様々な“数学的表現(Mathematical Expressions)”が定義されており、加法(“+”)、減法(“-”)、乗法(“*”)、除法(“/”)の演算子を用いた数式や“数学関数(Math Functions)”を用いて複雑な値を表すことができます。

数学的表現は以下の値が使用できる場所で使用できます。

数式

基本的な数式の記述方法

数学関数の引数には加法(“+”)、減法(“-”)、乗法(“*”)、除法(“/”)の演算子を用いた数式を使用することができます。

数式の計算は一般的な演算子の優先順位に基づいて行われます。つまり、乗算と除算は加算と減算よりも優先して行われ、それ以外は左から右へ順番に計算します。

誤った計算順序
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()”関数
引数となる複数の数式の型によって判断されます。

なお、データ型の判断は計算の組み合わせによっても変わることがあります。

数量定数

三角関数や指数関数では円周率(“π=3.14159...”)や自然対数の底(“e=2.71828...”)が多用されますが、利便性のために数式の中で使用できる定数が定義されています。

また、計算結果が無限や非数になった場合の処理のためにいくつかの追加の定数が定義されています。

数量定数の一覧

定数 説明
eCSS Values and Units Module Level 4 で追加 自然対数の底
piCSS Values and Units Module Level 4 で追加 円周率
infinityCSS Values and Units Module Level 4 で追加 正の無限大
-infinityCSS Values and Units Module Level 4 で追加 負の無限大
NaNCSS Values and Units Module Level 4 で追加 非数

数学関数の一覧

基本的な計算

関数 説明
calc()CSS Values and Units Module Level 3 で追加 加減乗除の計算

比較関数

関数 説明
min()CSS Values and Units Module Level 4 で追加 最小値を選択
max()CSS Values and Units Module Level 4 で追加 最大値を選択
clamp()CSS Values and Units Module Level 4 で追加 値の範囲を制限

丸め関数と剰余関数

関数 説明
round()CSS Values and Units Module Level 4 で追加 引数を指定した丸め幅で丸める
mod()CSS Values and Units Module Level 4 で追加 引数の剰余
rem()CSS Values and Units Module Level 4 で追加 引数の剰余

三角関数

関数 説明
sin()CSS Values and Units Module Level 4 で追加 引数の正弦
cos()CSS Values and Units Module Level 4 で追加 引数の余弦
tan()CSS Values and Units Module Level 4 で追加 引数の正接
asin()CSS Values and Units Module Level 4 で追加 引数の逆正弦
acos()CSS Values and Units Module Level 4 で追加 引数の逆余弦
atan()CSS Values and Units Module Level 4 で追加 引数の逆正接
atan2()CSS Values and Units Module Level 4 で追加 2個の引数の逆正接

指数関数

関数 説明
pow()CSS Values and Units Module Level 4 で追加 引数のべき乗
sqrt()CSS Values and Units Module Level 4 で追加 引数の平方根
hypot()CSS Values and Units Module Level 4 で追加 引数の二乗和の平方根
log()CSS Values and Units Module Level 4 で追加 引数の対数
exp()CSS Values and Units Module Level 4 で追加 eのべき乗

符号関数

関数 説明
abs()CSS Values and Units Module Level 4 で追加 引数の絶対値
sign()CSS Values and Units Module Level 4 で追加 引数の正負を調べる
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク