2021/02/19

CSSで計算できるcalc()の使い方【現役エンジニアが解説】

PROGRAM

今回は、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の例を示しています。

• facebook
• Tweet
• Read Later