CSSで計算できるcalc()の使い方【現役エンジニアが解説】
今回は、CSSで計算できるcalc()の使い方について、加減算と乗除算に分け、簡単に解説していきます。
加算及び減算
加算や減算は、calcの()内で+や-を使って行います。
このとき、+や-の記号の前後に半角スペースが必須となります。
.hoge{ width:calc(100% - 20px); height:calc(80% + 20px); }
上記のコードでは、calc()を使った加算と減算の計算式で、幅と高さを指定しています。
乗算及び除算
乗算や除算も、calcの()内で*や/を使い、計算を行います。
加算や減算と異なり、*や/の記号の前後の半角スペースは必ずしも要りません。
.hoge{ width:calc(100% / 3); height:calc(2em * 3); }
上記のコードでは、calc()を使った乗算と除算の計算式で、幅と高さを求め、指定しています。
単位の注意点
calc()では、記号の前後の半角スペースの他、単位にも注意すべきです。
乗算では両側に単位は付けられませんし、除算では割る数字に単位は付けられません。
.NG{ width:calc(25px * 25px); /* NG */ height:calc(100% / 3px); /* NG */ }
上記のコードでは、calc()を使った乗算と除算における単位の指定について、NGの例を示しています。