プラカンブログSTAFF BLOG

2019.01.21

【css】計算式が使える便利なcalc()の使い方!

【css】計算式が使える便利なcalc()の使い方!

こんにちは。デザイナーの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プロパティでも便利に使えるので、
ドンドン活用しましょう!!

参考リンク

下記は参考にしたサイトになります。
詳しく知りたい方は下記サイトをご覧ください。

 

 

 

+dc (鈴)

この記事は、SUZUKI が書きました。