CSS 数学関数

1. CSS 数学関数の概要

CSS の数学関数を使用すると、プロパティの値を数学的な計算式で指定できるようになります。これにより、異なる単位を組み合わせた計算や、ビューポート（Viewport）のサイズに応じた動的なスケーリングが容易になります。

現在、主要なブラウザで広くサポートされている関数は以下の通りです：

• calc()
• max()
• min()
• clamp()

2. calc() 関数

calc() 関数は、プロパティの値を指定する際に四則演算（加算、減算、乗算、除算）を行うことができます。

calc() の最大の特徴は、異なる単位を混ぜて計算できる点にあります。例えば、パーセンテージ（%）からピクセル（px）を引くといった計算が可能です。

2.1 calc() の使用例

以下の例では、calc() を使用して <div> 要素の幅を「100% から 100px 引いた値」に設定しています。

#div1 {
  position: absolute;
  left: 50px;
  /* 100% の幅から、左右の余白分（合計100px）を差し引く */
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

3. max() 関数

max() 関数は、カンマで区切られたリストの中から最大の値を選択して適用します。

3.1 max() の使用例

以下の例では、width プロパティに max(50%, 300px) を設定しています。これは、「要素の幅を 50% にするが、もし 50% が 300px より小さくなった場合は 300px を維持する（＝最小幅を 300px に制限する）」という挙動になります。

#div1 {
  background-color: yellow;
  height: 100px;
  /* 50% か 300px のうち、大きい方の値を幅として採用 */
  width: max(50%, 300px);
}

4. min() 関数

min() 関数は、カンマで区切られたリストの中から最小の値を選択して適用します。

4.1 min() の使用例

以下の例では、width プロパティに min(50%, 300px) を設定しています。これは、「要素の幅を 50% にするが、もし 50% が 300px より大きくなった場合は 300px に留める（＝最大幅を 300px に制限する）」という挙動になります。

#div1 {
  background-color: yellow;
  height: 100px;
  /* 50% か 300px のうち、小さい方の値を幅として採用 */
  width: min(50%, 300px);
}

5. clamp() 関数

clamp() 関数は、値を最小値、推奨値、最大値の 3 つの引数で制御します。値が「推奨値」の範囲にある間はその値が適用されますが、最小値より小さくなれば最小値が、最大値より大きくなれば最大値が適用されます。

数学的なロジックは以下の通りです：

clamp(MIN,VAL,MAX) = MAX(MIN,min(VAL,MAX))

5.1 clamp() の使用例

以下の例では、フォントサイズを動的に変更しつつ、一定の範囲内に収めています。

h1 {
  /* 最小 2rem、最大 5rem。その間はビューポート幅の 10% に追従 */
  font-size: clamp(2rem, 10vw, 5rem);
}

5.2 各引数の役割

6. まとめ

CSS の数学関数を使い分けることで、メディアクエリ（Media Queries）を過度に使用することなく、柔軟なレスポンシブデザインを実現できます。

• calc(): 異なる単位の計算が必要なときに使用。
• min() / max(): 境界値を設定して要素のサイズを制御したいときに使用。
• clamp(): フォントサイズやパディングなど、一定の範囲内でフルイド（流動的）に変化させたいときに最適。