CSS calc()関数とは？使い方を実例付きで解説

CSSのcalc()関数を使うと、長さの値に対して基本的な四則演算を適用できます。

• 足し算：+
• 引き算：-
• 掛け算：*
• 割り算：/

calc()の大きな特徴は、「パーセント」や「ピクセル」のように異なる単位同士でも計算できる点です。+と-の演算子の前後には必ず半角スペースが必要なので注意しましょう。

calc()の基本例

例えば、ある要素に幅100%を指定しつつ、合計32px分の余白を確保したい場合を考えてみましょう。calc()を使うと次のように書けます。

div {
	max-width: calc(100% - 32px);
}

これで、その要素は親コンテナの幅いっぱい（100%）から32pxを引いた幅になります。

実行結果：

UIデザインでは、パーセントとピクセルを同時に扱いたい場面がよくあります。そんなとき、このcalc()関数は非常に便利です。

要素を中央揃えする方法

さらに、margin-left: auto;とmargin-right: auto;を組み合わせれば、要素をコンテナ内で簡単に中央揃えできます。

div {
	max-width: calc(100% - 32px);
	margin-left: auto;
	margin-right: auto;
}

実行結果：

中央揃えされた要素は、左右それぞれ正確に16pxの余白を持つことになります。

このように、要素間にスペースを作りたい場合、paddingやmarginの代わりにcalc()を活用することも可能です。レスポンシブ対応のレイアウトを組む際に、ぜひ覚えておきたいテクニックと言えるでしょう。