こんにちは。デザイナーのSUZUKIです。
今回はCSSの「calc()」の使い方を紹介します。
calc()とは？
言葉自体の意味は「計算、演算、勘定」で、calculateの略です。
機能としては、calc()を使うと、計算式で指定することが可能になります。
CSS上で幅や文字サイズなどは、pxや％などで指定してきましたが、
calc()を使うことで複雑な指定ができます。
今回calc()の例は幅：widthですべて紹介しますが、
「長さ」、「周波数」、「角度」、「時間」、「数量」、「整数値」を扱う数値指定するプロパティで使えます。
対応ブラウザ
IEは9以上ですが、基本的なブラウザでは対応しているので、問題ありません。
詳しいブラウザ対応が知りたい方は下記を参照ください。
https://caniuse.com/#feat=calc
基本的な書き方
calc()内に計算式書くだけなので、とても簡単です。
計算式には下記四則演算が使用可能です。
| 足す | + |
|---|---|
| 引く | - |
| 掛ける | * |
| 割る | / |
/* 足す */ width: calc(100px + 50px); /* 引く */ width: calc(300px - 50px); /* 掛ける */ width: calc(50px * 4); /* 割る */ width: calc(100％ / 3);
具体的な書き方
〇異なる単位での計算が可能
width: calc(50％ - 50px);
％やpxなどを同じ計算式で組み合わせて使用できます。
PC時は固定幅のレイアウトをレスポンシブ対応で相対幅にする際に、
単位が組み合わせられるととても便利です。
〇入れ子の計算方法
（）を使った入れ子の計算も可能です。
ただ、入れ子の計算式にもcalc()を指定する必要があるので、注意してください。
例えば、(100% - 100px) / 3 のような場合は下記のように指定します。
width: calc( calc(100% - 100px) / 3 );
〇3や6など割り切れないときに便利
width: calc(100% / 3); width: calc(100% / 6);
幅の3分割など、割り切れない数値の指定は面倒でしたが、
calc()なら計算せずに式を指定するだけなので、簡単です。
レスポンシブで幅が可変する場合も自動的に計算し直すので、
数値指定のように困りません。
まとめ
calc()を追加するだけで、通常の四則演算と変わらないので、とても簡単です。
なんといっても、計算しなくていいのがいいですね。
今まで計算した結果の数値を指定する必要がありましたが、
計算式を指定すればいいので、ぜひ試してみてください。
今はレスポンシブ対応が必須なので、固定値と相対値両方つかうことが多く、
指定の仕方が難しかったです。
calc()のおかげで、この悩みもスッキリです！
今回はよく使う幅で説明しましたが、
フォントサイズなど他のCSSプロパティでも便利に使えるので、
ドンドン活用しましょう！！
参考リンク
下記は参考にしたサイトになります。
詳しく知りたい方は下記サイトをご覧ください。
- [CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html - CSSで計算式を可能にするcalc()ファンクション
https://w3g.jp/blog/css3_calc_function
