今回は、幅や高さなどを計算式で指定できる便利なcalc関数について説明します。
calc関数はpxや%などの異なる単位を使って計算できる、レスポンシブとも非常に相性のいいものになります。
現在はdisplay:flex;で補える部分もありますが、対応しきれない場合にはcalc関数を使用する場面も多いので覚えておくと便利です。
calc関数についてとの基本的な書き方
calc関数は四則演算(足し算・引き算・掛け算・割り算)を可能にする関数となります。
- 足す = 「+」
- 引く = 「-」
- 掛ける = 「*」
- 割る = 「/」
これらを使用し、異なる単位(pxや%など)での計算が可能です。
以下は全てwidthが200pxになるように計算した、簡単な使用例です。
/* 足し算 */
.box {
width: calc(150px + 50px);
}
/* 引き算 */
.box {
width: calc(250px - 50px);
}
/* 掛け算 */
.box {
width: calc(100px * 2);
}
/* 割り算 */
.box {
width: calc(400px / 2);
}上記のようにcalc()の中に計算式を記述します。
widthにしか指定していませんが、heightやmargin、padding、font-sizeなど様々な要素に使用可能です。
px以外の単位を使用する場合
続いて、px以外の単位を使用する場合の記述です。
/* %を使用 */
.box {
width: calc(100% / 5);
}
/* vhを使用 */
.box {
height: calc(100vh - 50px);
}%を使用する場合は、レスポンシブ時の計算をする必要がなくなったり、要素の横並びで均一な横幅にしたい場合に便利です。また、vhを使用した例は画面の高さいっぱいに表示したい際に、追従するヘッダーの高さを引いて指定出来ます。
calc関数を入れ子にする
calc関数は入れ子で使用する事もできます。
入れ子にした内部関数は単純なかっこ()式として扱われます。calc関数の入れ子計算は以下のようになります。
/* calc関数の入れ子計算 */
.box {
width: calc(calc(100% - 50px) / 3);
}
/* 入れ子計算は単純なかっこ式として扱われます */
.box {
width: calc((100% - 50px) / 3);
}入れ子計算の記述としては単純なかっこ式calc((100% – 50px) / 3)の記述で大丈夫です。
calc関数の注意点
calc計算の注意点ですが、少し前まではIE全般・Edgeの古いバージョンでcalc(100% / 5)のように100%で計算すると計算後の合計値が100%を超えてしまい、カラム落ちしてしまう場合がありました。
現在は、IEはサポート外・Edgeも古いバージョンでなければ問題ありませんが、旧バージョン等の対応が必要な場合はcalc(99.9% / 5)と指定する事で回避可能です。
※0.1%の値は肉眼ではほぼ分からないかと思いますが、ぴったりとしたレイアウトの場合は目立つ場合がありますので注意してください。
さいごに
いかがでしたでしょうか。
calc関数を使えるようになると、幅高さの指定などがかなり楽になり、応用するとフォントサイズを横幅に合わせて可変させたりなど、様々な使い方が出来ます。ぜひ使い方を覚えて使用してみてください。
