CSS 比較関数 min()・max()・clamp() の使い方

CSS の比較関数である min()・max()・clamp() を使うと、これまで複数行で記述していたレイアウト調整を、よりシンプルに書けるようになります。

min()

min() は、カンマで区切られた値を比較し、その「最小値」を返します。
主に「要素の最大サイズを決めたい」場合に便利です。

 これまでの書き方（例）

 min() を使う書き方

関数名は min（最小）ですが、指定した値のうち「小さい方」が選ばれるため、結果として 最大サイズの制限（max-width 的な挙動）を実現できます。

 DEMO

See the Pen [CSS] min() by mkl may (@mkl-may) on CodePen.

max()

max() は、カンマで区切られた値を比較し、その「最大値」を返します。
主に「要素の最小サイズを決めたい」場合に便利です。

これまでの書き方（例）

max() を使う書き方

関数名は max（最大）ですが、指定した値のうち「大きい方」が選ばれるため、結果として 最小サイズの制限（min-width 的な挙動）を実現できます。

 DEMO

See the Pen [CSS] max() by mkl may (@mkl-may) on CodePen.

clamp()

clamp() は clamp(最小値, 推奨値, 最大値) の3つを比較して、条件に合う値を返します。

• 推奨値が最小値より小さい → 最小値が適用
• 推奨値が最大値より大きい → 最大値が適用
• その間なら → 推奨値が適用

 clamp() を使う書き方

 DEMO

See the Pen [CSS] clamp() by mkl may (@mkl-may) on CodePen.

clamp(300px, 50vw, 800px)

• ビューポート幅 1920px
  • 推奨値：50vw = 960px
  • 比較：300px, 50vw(=960px), 800px
  • 結果：推奨値が最大値より大きいため、最大値の800px が適用される

• ビューポート幅 375px
  • 推奨値：50vw = 187.5px
  • 比較：300px, 50vw(=187.5px), 800px
  • 結果：推奨値が最小値より小さいため、最小値の300px が適用される