✨ 無料・登録不要

CSS clamp() ジェネレーター

min/max/viewportを入力するだけでレスポンシブなclamp()値を自動生成

px入力でclamp()値を自動計算
ライブプレビューでフォントサイズ確認
CSSをワンクリックコピー

このツールをシェア

シェア送るシェア

パラメータ設定

最小フォントサイズ（px）

最大フォントサイズ（px）

最小ビューポート幅（px）

最大ビューポート幅（px）

生成されたclamp()値

clamp(1rem, 1vw + 0.5rem, 2rem)

プレビュー（ビューポート幅をスライダーで調整）

320px 760px 1920px

流体タイポグラフィのサンプルテキスト — The quick brown fox

現在のビューポート 760px → フォントサイズ: —

このツールについて

CSS clamp()関数の値を計算・生成する無料ツールです。最小値・最大値・ビューポート範囲を入力するだけで、レスポンシブなフォントサイズや余白の clamp() 値を自動算出。

📊

自動計算

min/max/viewport範囲からclamp値を自動算出

📱

レスポンシブ対応

画面幅に応じて滑らかにサイズ変化

📋

CSS出力

clamp()関数を含むCSSをワンクリックコピー

使い方

最小値を設定

最小画面幅でのフォントサイズや余白を設定します。

最大値を設定

最大画面幅での値を設定します。

ビューポート範囲を指定

最小値と最大値が適用される画面幅を指定します。

clamp値をコピー

計算されたclamp()関数の値をコピーして使用します。

よくある質問

clamp()とは何ですか？

CSS clamp(min, preferred, max)は、最小値と最大値の間でレスポンシブに値を変化させる関数です。メディアクエリなしでフルイドなサイズ指定ができます。

フォントサイズ以外にも使えますか？

はい、padding、margin、gap、widthなど、数値を取るほぼすべてのCSSプロパティに使用できます。

ブラウザ対応状況は？

主要モダンブラウザ（Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+）で対応しています。IE11は非対応です。

rem単位での出力は？

はい、px、rem、emの各単位で出力可能です。1rem=16pxの前提で自動変換します。

CSS clamp() ジェネレーター

パラメータ設定

生成されたclamp()値

このツールについて

使い方

よくある質問

関連ツール