clamp()

レスポンシブ・関数

最小値、推奨値、最大値を指定してレスポンシブな値を設定する関数です。フルードタイポグラフィに最適です。

構文

Syntax

clamp(<min>, <preferred>, <max>)

font-size: clamp(1rem, 4vw, 3rem);

実行結果

font-size: clamp(1rem, 4vw, 3rem) - レスポンシブフォント

レスポンシブなタイトル

💡 最小1rem、最大3rem。画面幅に応じて4vwで自動調整

1remから3remの間でビューポート幅に応じて調整

width: clamp(300px, 50%, 800px);

実行結果

width: clamp(300px, 50%, 800px) - レスポンシブ幅

幅が自動調整されるコンテナ

💡 最小200px、最大400px。親要素の50%で調整

300pxから800pxの間で50%の幅を維持

padding: clamp(1rem, 5vw, 4rem);

実行結果

padding: clamp(1rem, 5vw, 4rem) - レスポンシブ余白

余白が画面サイズに応じて調整

💡 メディアクエリ不要でレスポンシブな余白を実現

レスポンシブなパディング設定

メディアクエリを減らせる。calc()と組み合わせるとさらに柔軟。

Chrome 79+, Firefox 75+, Safari 13.1+