【初心者向け】CSSの数学関数を基礎から応用まで徹底解説！

CSSにも「数学的な計算式」が使えるのをご存じですか？
例えば、「画面サイズに応じて幅を調整する」「最小値・最大値を指定する」「フォントサイズを自動で拡大縮小する」など、柔軟なデザインが可能になります。
このページでは、代表的なCSS数学関数を、初心者向けに見本と一緒にわかりやすく解説します。

1. calc()：計算する

calc()は、異なる単位同士の計算ができる関数です。たとえば、「100%から30px引く」などが可能です。
使い方は以下のようにとてもシンプルです。

width: calc(100% - 30px);

実例：

注意：+ や - の前後にはスペースが必要です。
×や÷も使えますが、演算順序に注意してください。

2. min() と max()：最小・最大をとる

min(): 最小値を使う

複数の値の中から「一番小さい値」を自動で選んでくれる関数です。

width: min(90%, 500px);

→ 画面が大きければ500px、小さければ90%になります。

max(): 最大値を使う

max()は、逆に「一番大きい値」を選びます。

width: max(300px, 50%);

→ 小さい画面でも必ず最低300pxを保ちます。

3. clamp()：幅やフォントサイズをスマートに調整

clamp(最小値, 理想値, 最大値) という形で使います。
例えば、フォントサイズを「最小16px、理想2vw、最大24px」で調整する場合：

font-size: clamp(16px, 2vw, 24px);

メリット：メディアクエリなしでレスポンシブデザインが実現できます。

4. 関数の組み合わせ（ネスト）

CSSの数学関数は、calc()の中にmin()やmax()を入れるなど、組み合わせて使うこともできます。

width: calc(min(100%, 600px) - 20px);

用途：「最大600pxまでは幅を可変に、それ以上なら固定」などが可能です。

5. 対応ブラウザと注意点

• calc()は全ブラウザで幅広く対応（IE11以降）
• min(), max(), clamp() は、ほぼすべてのモダンブラウザで対応
• 古いブラウザ（例：IE11）では min() や clamp() が効かないため注意
• 計算式にスペースを入れるのを忘れないように（例：calc(100% - 30px)）

6. まとめ

CSS数学関数は、レスポンシブなWebデザインを実現する上で非常に便利なツールです。
覚えると、次のようなことができるようになります：

• 異なる単位を柔軟に計算する
• 画面幅に応じて自動調整されるボックス
• フォントサイズの動的調整
• 複数条件を組み合わせた最適なレイアウト

難しそうに見えても、基本を押さえればとても便利です。ぜひ、今回のコードをコピペして試してみてください！