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 年なら全環境安全。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00