【CSS Modules】calc()関数の使い方
calc()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
calc()関数はCSSプロパティの値として、四則演算を用いた動的な計算を実行する関数です。この関数を使用することで、要素の幅、高さ、余白、フォントサイズなど、様々なCSSプロパティに、pxや%といった異なる単位を組み合わせた値を適用できます。これにより、ビューポートサイズや親要素に合わせた柔軟なレイアウト調整が可能となり、特にレスポンシブデザインの実装に非常に役立ちます。
利用可能な演算子は加算（+）、減算（-）、乗算（*）、除算（/）です。加算と減算では異なる単位を自由に組み合わせられますが、乗算と除算の場合は、少なくとも片方のオペランドが単位を持たない数値である必要があります。例えば、width: calc(100% - 50px);のように使用します。
重要な注意点として、加算と減算の演算子（+, -）の前後に必ず半角スペースを記述してください。スペースがないと構文エラーとなります。また、計算結果の単位は、そのCSSプロパティが受け入れる単位と一致していなければなりません。calc()関数は、これらの規則に従って利用することで、CSSの表現力を高め、より複雑なレイアウトを効率的に実現する強力なツールです。
公式リファレンス: calc()
構文(syntax)
1width: calc(100% - 80px);
引数(parameters)
<calc-sum>
<calc-sum>: 計算式を指定する値。加算、減算、乗算、除算が可能です。
戻り値(return)
計算結果に応じたCSSのデータ型
calc() 関数の戻り値は、計算結果として算出されたCSSのデータ型です。例えば、長さや角度、色などを計算した場合、その計算結果に対応するCSSのデータ型（例: <length>, <angle>, <color>など）が返されます。