
コラム:CSS上で計算したいときのやり方
CSS
「どうしても数値を考えるのが面倒くさい」「計算でサイズを出したい」など、
そんなときに役立つ関数「clac関数」を今回はご紹介します。
これは、数値などの四則演算(+,-,×,÷)が可能になる関数です。
関数とは、関数名後の()内に入力すると、自動的に計算し、反映してくれる便利機能です。
使用例をご紹介します。
基本の計算
リストの横並びの際などに使うことがあります。
例)3つの横幅を同じ大きさにしたい場合
width:calc(100% / 3);
※ ÷は/と書きます
加算・減算を先にしたい場合
算数や数学と同様に、()を使います。
例)全体から10%分横幅を引いた後、3つの横幅を同じ大きさにしたい場合
width:calc((100% – 10%) / 3);
※ ÷は/と書きます
※関数については詳しくは割愛しています。ご了承ください。
© koulidy