【CSS Modules】calc-keyword型の使い方

calc-keyword関数は、CSSのプロパティ値に対して算術演算を実行する関数です。この関数を用いることで、ウェブページの要素のサイズや位置などを、固定値だけでなく、他の値に基づいた計算式で動的に指定することが可能になります。これにより、画面サイズやコンテンツ量に応じて柔軟に調整される、レスポンシブなデザインや再利用性の高いコンポーネントの作成に大きく貢献します。

calc-keyword関数は、加算（+）、減算（-）、乗算（*）、除算（/）の基本的な四則演算に対応しており、異なるCSS単位を組み合わせて計算できる点が特徴です。例えば、「幅を親要素の100%から20ピクセル引いた値にする」といった指定をwidth: calc(100% - 20px);のように記述できます。また、paddingやmargin、font-sizeなど、数値を受け入れる様々なCSSプロパティに適用できます。

利用時には、演算子（+、-、*、/）の前後に必ず半角スペースを挿入する必要があります。スペースがない場合、特に+や-の演算はCSSの構文エラーとして扱われる場合がありますので注意が必要です。

CSS Modulesの文脈において、calc-keyword関数は、コンポーネントごとに独立したスコープを持つスタイルシートの中で、より動的で柔軟なプロパティ値を定義する際に役立ちます。各コンポーネントが自身のレイアウト要件に合わせてcalc()を用いた計算式を定義することで、グローバルなスタイルとの衝突を避けつつ、個別の要素が持つべき最適なサイズや位置をプログラム的に決定し、保守性と再利用性の高いスタイリングを実現します。

Copy
1width: calc(100% - 20px);

引数なし

引数はありません

戻り値なし

戻り値はありません