コラム:CSS上で計算したいときのやり方

CSS

「どうしても数値を考えるのが面倒くさい」「計算でサイズを出したい」など、
そんなときに役立つ関数「clac関数」を今回はご紹介します。

これは、数値などの四則演算(+,-,×,÷)が可能になる関数です。
関数とは、関数名後の()内に入力すると、自動的に計算し、反映してくれる便利機能です。
使用例をご紹介します。

基本の計算


リストの横並びの際などに使うことがあります。
例)3つの横幅を同じ大きさにしたい場合
  width:calc(100% / 3);
※ ÷は/と書きます

加算・減算を先にしたい場合


算数や数学と同様に、()を使います。
例)全体から10%分横幅を引いた後、3つの横幅を同じ大きさにしたい場合
  width:calc((100% – 10%) / 3);
※ ÷は/と書きます

※関数については詳しくは割愛しています。ご了承ください。