Fluid Type Clamp Generator

使い方

1. スケールさせたいビューポートの範囲を入力します。例：320px から 1280px。
2. 小さい側と大きい側のフォントサイズを入力します。例：16px から 24px。
3. ルートフォントサイズを設定します（px を rem に変換する基準、既定値 16px）。
4. 出力単位として rem または px を選びます。rem はブラウザの文字サイズ設定に追従します。
5. 各ビューポート幅での計算サイズを確認し、生成された CSS をコピーします。

よくある用途

• レスポンシブな見出し — 複数のブレークポイント上書きを 1 行に置き換えられます。
• デザイン引き渡し — スケールの説明ではなく正確な clamp() を渡せます。
• アクセシビリティ確認 — 小さい側のサイズが読みにくい値まで落ちていないか確認できます。
• 計算の理解 — ビューポート範囲を変えたときの傾きと切片の変化を観察できます。

よくある質問

Q: clamp() の中央の値は何を意味しますか？ A: 推奨値です。切片とビューポート相対の傾きを組み合わせた形（例：0.5rem + 1.5625vw）になります。ブラウザは任意の幅でこの値を計算し、設定した最小値と最大値の間に収めます。

Q: px より rem が推奨されるのはなぜですか？ A: rem はルートフォントサイズに連動するため、ブラウザの既定文字サイズを大きくしている利用者にも拡大が反映されます。px 出力ではその設定が無視され、読みづらくなる場合があります。

Q: ビューポート範囲の外ではどうなりますか？ A: 最小幅より狭い場合は最小サイズ、最大幅より広い場合は最大サイズで固定されます。生成されるフォールバックは、clamp() 非対応のエンジン向けに同じ挙動をメディアクエリで再現します。