CSS Clamp生成ツール
最小・最大サイズとビューポートを指定するだけで clamp() 値を自動生成。Fluid Typography・レスポンシブスペーシングに。
ライブプレビュー
VP: 768px → 19.0px375px1440px
| Viewport | Size (px) | Size (rem) |
|---|---|---|
| 375px | 16.00 | 1.0000 |
| 768px | 18.95 | 1.1845 |
| 1024px | 20.88 | 1.3047 |
| 1280px | 22.80 | 1.4249 |
| 1440px | 24.00 | 1.5000 |
サイズ設定
ビューポート設定 (px)
プリセット
生成コード
clamp(1rem, calc(0.7512vw + 0.8239rem), 1.5rem)
最小値
1rem
preferred
calc(0.7512vw + 0.8239rem)
最大値
1.5rem
使い方
/* font-size / width / padding などに使用 */ font-size: clamp(1rem, calc(0.7512vw + 0.8239rem), 1.5rem); padding: clamp(1rem, calc(0.7512vw + 0.8239rem), 1.5rem);
CSS clamp() とは
clamp(min, preferred, max) はビューポート幅に応じて値を滑らかに変化させる CSS 関数です。
- ブレークポイントなしでテキスト・余白を流体的にスケール
font-size/padding/widthなど幅広く使用可能- ブラウザ対応: Chrome 79+ / Firefox 75+ / Safari 13.1+