CSS3

：

CSS関数

：

calc()

　 編集：2022.07.09 by T.A.

→●、mdn

引数の計算を行います。

加算（+）、減算（-）、乗算（*）、除算（/）、丸括弧( ) を利用して数量的な値に対し、基本的な算術を遂行する。

calc(A)
A CSS値、CSS式。
例
<DIV style="border:1px solid red;
 width:calc(50px + 100px);
">テスト</DIV>
<DIV style="border:1px solid red;
 width:calc(150px - 50px);
">テスト</DIV>
<DIV style="border:1px solid red;
 width:calc(20pt * 5);
">テスト</DIV>
各値と算術記号との間に空白が必要

以下のCSSが組み込んであります： 

<DIV style="border:1px solid red;
 width:calc(var(--Test) + 100px);
">テスト</DIV>

テスト
別画面に表示させて。
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：