CSS指定できる便利な数値の指定に「calc()」があります。
calcで指定をすると、計算した結果が数値として反映されるため、レスポンシブや等分にするときにとても便利です！
今回は「calc()」の基本的な使い方から注意点までを解説していきます！
calcとは
CSSのcalc()関数は、長さやサイズを指定する際に計算を行うためのものです。
通常、CSSで使用する単位はpxなどの固定値や割合（%）などが多いですが、calc()を使用すると異なる単位間の計算や複数の値を組み合わせたサイズの指定が可能になります。
例えば、固定値と割合を組み合わせて要素の幅を調整したい場合、calc()を使うことで柔軟な指定ができます。
calcの使い方
calc()関数は、四則演算（足し算、引き算、掛け算、割り算）を使って動的に値を計算します。
基本的な書き方は次のように、「calc」という言葉に「()」を続けて書きます。
calc(計算式)例えば、以下のコードを書くと、幅を50%に40pxを足した値に指定することができます。
width: calc(50% + 40px);このように、calc()を使うことで、固定値と相対的な単位を組み合わせたレイアウトが可能になります！
使い方と例
calc()はかなり色々な場所の指定に使うことが可能です。
特に、レスポンシブデザインや要素の幅・高さの調整、余白の動的計算などで役に立ちます。
ここではよく使う例をいくつか紹介していきます！
例1: 幅の計算
calc()を使用する頻度が高い場所が幅の計算です。
以下の例では、要素の幅を画面幅の50%に40pxを足した値に指定しています。
.container {
width: calc(50% + 40px);
}この指定により、デバイスの幅に応じて50%の相対幅に対して固定の40pxを加える柔軟なレイアウトが実現できます。
例2: マージンとパディングの調整
calc()はマージンやパディングにも活用できます。
例えば、上下のマージンを固定値で、左右のマージンを動的に調整したい場合、次のようになります。
.element {
margin: calc(10px + 2%) auto;
}このように、固定値とパーセンテージを組み合わせてみたり、ショートハンドの部分的なところだけに使用することも可能です！
使う時の注意事項
calc()を使用する際には、いくつかの注意点があります。
正しい書き方をしないと想定通りにならないことがあるので、次のポイントに気をつけましょう。
演算子のスペースに注意
calc()で演算を行う際、演算子の前後にスペースが必要です。
たとえば、次のようにスペースがない場合はエラーとなります。
/* 間違った例 */
width: calc(100%-50px);正しくは次のように、演算子の前後にスペースを入れましょう。
/* 正しい例 */
width: calc(100% - 50px);ブラウザ対応
calc()は主要ブラウザではほぼ完全にサポートされていますが、古いバージョンのブラウザや一部の環境では動作しない場合があります。
対象となるブラウザやデバイスでの互換性を十分に確認しましょう。
パフォーマンス
calc()は便利な機能ですが、頻繁に使用するとパフォーマンスに影響を与える場合があります。
特に、リアルタイムでサイズや位置を変更するアニメーションなどで多用すると、描画に負担がかかることがあるため、コンテンツによっては使わない方がいい場合もあります。
まとめ
calc()は、CSSのレイアウトやデザインにおいてかなり使い勝手の良い関数です！
適切に使うことで、綺麗なレスポンシブ実装や工数削減にも繋がるので、ぜひ活用してみてください！
