CSS clamp() 計算機（流体タイポグラフィ）
流体タイポは `clamp(min, preferred, max)` で 2 つのビューポート幅間を線形スケール — ブレイクポイント不要。本計算機は最小・最大値とビューポート範囲から、丸め誤差なしの正確な `clamp(min, intercept + slope*100vw, max)` を出力。`rem`（ルート設定可）または `px`。プレビューブロックでスケールをリアルタイム確認。
—
プリセット
結果
font-size: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);ウィンドウサイズを変えるとプレビューが線形にスケールします。
プレビュー
いろはにほへとちりぬるを — The quick brown fox.
使い方
- プリセット（Body・H1 など）を選ぶか、min/max 値とビューポート範囲を直接入力。
- rem か px を選択（アクセシビリティのため rem 推奨）。
- 1 行の clamp 式を CSS にコピー。
よくある質問
- なぜメディアクエリでなく clamp()？
- 2 つのブレイクポイント間を線形スケール — ジャンプなし、各ブレイクポイントごとに値を管理する必要なし。同じ効果を少ない行数で。
- なぜ px でなく rem？
- ユーザーはブラウザでベースフォントサイズを変えられます（アクセシビリティ等）。rem は尊重、px は無視します。
- 中央の slope は？
- ビューポート `1vw` 増加あたりの値の伸び。intercept と組み合わせて (minVw, minVal)・(maxVw, maxVal) を通る 1 次関数。
- ブラウザ対応？
- `clamp()` は 2020 年以降のすべてのブラウザ — Safari 13.1・Chrome 79・Firefox 75。2026 年なら全環境安全。
関連ツール
CSS 単位コンバーター
ベースフォントサイズとビューポートを指定して px・rem・em・pt・vw・vh・% を相互変換。
変換 0 0
CSS Grid プレイグラウンド
grid-template-columns / rows・gap・アイテム整列を視覚的に — CSS をそのままコピー。
開発 0 0
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー 0 0
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー 0 0
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
カラー 0 0