【CSS】計算式を使う方法を調べてみた

こんにちは朱夏です。

今回は、CSSで計算式を使う方法を調べてみました。
要素の幅やmargin等を指定するのに計算式を使えたら、デザインの自由度が上がると思います。

それではいってみましょう。

計算式の使い方

計算式を使うには、calc()関数を使用します。

具体的な書き方としてはこちら。

.test {
  width:calc(100% - 20px);
}

widthなどの数値を指定する部分に、calc関数を置いて、その中で計算された結果をもとに横幅が決まります。
上記の例の場合だと、ブラウザの横幅いっぱいから、常に20px少ない幅で表示させることが出来ます。

calc()で使える計算式

calc()で使用できる計算式は、加減乗除の四則計算になります。
足し算、引き算、掛け算、割り算の4つですね。

これらはwidth以外にも位置、角度、フォントサイズなど、殆どの数字を使う場所で使用する事が出来るようです。
translateみたいな時間に関するところでも使用する事が出来るようです。

使用例

今回のサンプルはこちらです。

See the Pen
vYNwbjo by 朱夏 (@syunatsu1)
on CodePen.

widthに対して計算式を使いました。
横幅いっぱいから50pxマイナスして、それを中央寄せにしました。
これによって両側の余白を25pxずつ固定で確保する事が出来ました。

marginを使わなくても余白を取る事が出来たと考えるとお得ですね。

あとがき

というわけで、簡単ですがcalc()の使い方でした。
今回のまとめはこちら。

• CSSで扱う数値を計算で指定可能
• 四則計算が使える

使いこなせば色々と便利そうなcalc()関数ですが、今のところ実戦で使ったことは一度もありません。
とはいえ、折角の機能なので使える方法を考えてみたいと思います。
個人的にはアニメーションの実行タイミングや時間などの計算で何か出来ないかなとか考えています。

今回は以上です。
次回もよろしくお願いします。