CSS Clamp()計算ツール 🔒 ブラウザ内で完結 — 何もアップロードされません。

フォントサイズを滑らかにスケーリングするための流動的なclamp()値を生成。

サイトが html { font-size } をブラウザの既定値 16px 以外に設定している場合のみ変更してください。

CSS 出力

 

プレビュー

本当の可変スケーリングは実際にブラウザウィンドウをリサイズしないと分かりません。以下の3つの例は、最小・中間・最大のビューポート幅での近似表示です。

最小ビューポート時
素早い茶色の狐がのろまな犬を飛び越える
中間点(近似)
素早い茶色の狐がのろまな犬を飛び越える
最大ビューポート時
素早い茶色の狐がのろまな犬を飛び越える

このツールについて

従来のレスポンシブタイポグラフィは、メディアクエリのブレークポイントごとに固定サイズ間で突然切り替わります——モバイルでは16px、ある幅を超えると突然20pxに。CSS の `clamp(最小値, 優先値, 最大値)` はこの急な切り替えを連続的なスケーリングに置き換えます。フォントサイズは、選択した最小値と最大値の間でビューポートに合わせて滑らかに変化します。最小ビューポート幅より狭い場合は最小サイズに固定され、最大ビューポート幅より広い場合は最大サイズに固定されます。その間だけ可変になります。

このツールは補間計算を代わりに行います。選択したビューポート範囲における最小・最大フォントサイズ間の線形の傾きを求め、それを `vw` ベースの優先値として表現し、すぐに貼り付けられる `clamp()` 文字列にまとめます。結果を `font-size`(または他の数値プロパティ)にそのまま貼り付ければ、ブレークポイントごとの個別オーバーライドは不要になります。

よくある質問

メディアクエリではなくclamp()を使う理由は?

メディアクエリはブレークポイントで固定サイズ間をジャンプしますが、clamp()はビューポートのサイズ変更に応じて最小値と最大値の間を滑らかかつ連続的にスケーリングします。どの幅でも目に見える「ジャンプ」はありません。

clamp()はすべてのブラウザで動作しますか?

はい。CSS clamp()は2020年以降、すべての主要ブラウザ(Chrome、Firefox、Safari、Edge)でサポートされているため、今日ではほぼすべてのユーザーに対してフォールバックなしで本番環境で安全に使用できます。