calcとは
CSSのプロパティ値を指定する際に計算を行うことができる関数。
例えば最大幅640pxの2列のカラムで1列ずつを300pxにして間の余白を40pxにしたい場合は以下のようになるが…
<div class="row">
<div class="col">
これはサンプルの文章です。
</div>
<div class="col">
これはサンプルの文章です。
</div>
</div>
.row {
display: flex;
justify-content: space-between;
width: 640px;
max-width: 640px;
margin: auto;
}
.col {
width: 300px;
background: #eee;
}
これだと幅640px未満のスマートフォンで画面外に表示されてしまう。
calcを使用すれば幅から各カラムの%を計算できるため、以下のように記述できる。
.col {
width: calc((300 / 640) * 100%);
background: #e33;
}
「(300 / 640) * 100% 」は46.875%なのでcalcを使用しない場合はwidthに46.875%を指定すれば同じ幅になる。
calcを使用したほうが例えば幅640pxから620pxに変更になった場合640を620に書き換えるだけなので書くのが楽になる。
便利なcalcだが使用方法にクセがあって間違った使い方をしているケースも多い。
この記事ではcalcでよくある間違った5つの使い方について解説しています。
これ以降のサンプルはcalcの計算が正しく行われていないため、すべて間違いです。
1. pxの付け方が間違っている
前述の例を見てもわかる通り、calcでpx同士の計算する際はpxの単位は使用しない。
もしpxが付いているとcalcの計算は行われない。
/* px同士の計算でpxを使うのは間違い */
.col {
width: calc((300px / 640px) * 100%);
background: #ccc;
}
ただし、「100% - 40px」のようにpx同士でない場合は逆にpxを付ける。
/* OK */
.col {
width: calc((100% - 40px) / 2);
}
/* NG */
.col {
width: calc((100% - 40) / 2);
}
最近だとCSSカスタムプロパティ(変数)がpxのため、意図せずcalcの計算が行われないケースもあるので変数を使用する際は注意したほうが良い。
:root {
--main-width: 640px;
}
.row {
max-width: var(--main-width);
}
.col {
width: calc((300 / var(--main-width)) * 100%);
}
2. 演算子の前後に半角スペースがない
calcに計算式を入れる際に+や-などの演算子は前後に半角スペースがないと演算子として扱われないため計算されない。
/* calcで演算子の前後に半角スペースがないのは間違い */
.col {
width: calc((300 / (600+40)) * 100%);
background: #ccc;
}
3. calcではなくcalになっている
名前が違うので当然calでは計算されない。
/* calcがcalになっている */
.col {
width: cal((300 / 640) * 100%);
background: #ccc;
}
JavaScriptだとalart(1)のようにメソッド名を間違えるとブラウザでエラーになるが、CSSのcalはエラー扱いにはならないので厄介。
※ ちなみにcalcはcalculate(計算する)の略
4. 四則演算の計算順が間違っている
小学校で習うことなので知らない人はいないと思うが、「足し算と引き算」よりも「掛け算と割り算」のほうが先に行われる。
そのため、calc(300 / 320 + 320 * 100%)のようになっていると「掛け算と割り算」が先に計算されてしまうため、意図した結果にならない。
/* calcの計算順が間違っている */
.col {
width: calc(300 / 320 + 320 * 100%);
background: #ccc;
}
5. 四則演算以外が使用されている
calcは四則演算(+ - * /)のみ使用可能なので逆に言うとそれ以外の余りを算出する%などは使用できない。
/* calcの四則演算以外の計算は不可 */
.col {
width: calc(4.4 % 2 * 100%);
background: #ccc;
}
