eclairのブログ 
CSSのcalc()関数の使い方を解説しています。calc()関数は使い方を覚えると、異なる単位同士を柔軟に計算することができるので便利です。使用頻度は多くはありませんが、いざ出てきた時に知らないと困ってしまうものでもあります。注意点や使用例も載せていますので、参考にしてください。
calc()関数の基本
calc()関数はCSSのプロパティの値として計算式を指定できるようにする関数です。%とpxなど異なる単位を組み合わせた計算をするときに重宝します。以下の例は、calc()関数を使って横幅に100%から40px分引いた時の大きさを設定しています。
width: calc(100% - 40px)- 足し算(
+) - 引き算(
-) - 掛け算(
*) - 割り算(
/)
calc()関数は足し算、引き算、掛け算、割り算の４つの演算子が使えます。「掛け算と足し算が並んでいる場合は、掛け算から先に計算する」といった一般的な演算子の優先順位で計算されます。()(丸括弧)で括ることで計算式の優先順位も決められます。
calc()関数を使う時の注意点
＋演算子とー演算子の前後には空白をつけて記述する必要があります。width: calc(100%-40px);だと-の前後に空白がないためエラーになります。*演算子と/演算子の場合には空白なしでも動作しますが、記述ルールを統一するために演算子の前後には必ず空白をつけるようにするのがおすすめです。
calc() – CSS: カスケーディングスタイルシート | MDN
+演算子と-演算子は前後に空白文字をつける必要があります。たとえば、calc(50% -8px)と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。
calc()関数を使うシチュエーション
以下の記事では、calc()関数を使ったカードの横幅指定を実践的に解説しています。具体的にcalc()関数を活用するイメージをつけたい方は参考にしてください。
【コーディングの解説】HTMLとCSSでカードグループをつくる
calc()関数を使うシチュエーションとしては、フォントサイズをデバイス幅に応じて可変させたい時や横並びのカードを画面幅が縮まるにつれて伸縮させたい時などが挙げられます。
コメントで読んだ感想をお待ちしています。読んでる中で疑問に思ったことも気軽に書き込んでくださると嬉しいです。
Twitterでも情報発信しているのでぜひフォローしてください。（@YutoSeta）
