CSSのclamp()値で流動的なサイズを作成

フロントエンド開発者が、画面幅に応じて見出しや余白のサイズを滑らかに変えたいときに、CSSのclamp()値を整えるために使えます。

2つのサイズからレスポンシブなCSSのclamp()値を生成します。すべての処理はブラウザ内で完結し、入力した値が外部へ送信、共有、保存されることは一切ありません。

よくある例では、小さな画面と大きな画面の間で拡大縮小するテキストサイズを定義します。生成後は clamp 値をコピーし、スタイルシートでテストして、テキストが想定どおりにビューポート幅に追従するか確認してください。

入力

出力

clamp(16px, 13.090909px + 0.909091vw, 24px)

フルイド値の計算はブラウザー内で実行されます。入力した寸法はお使いのデバイスに留まり、外部サービスに送信されません。データを送信せずに CSS を準備できます。

最小サイズと最大サイズをピクセルで指定し、次に最小ビューポート幅と最大ビューポート幅を指定します。このツールはこれらの点を使用して、2 つのサイズ間の変化を作成します。

はい、生成された値は、CSS プロパティが clamp 関数を受け入れる限り、テキストサイズ、マージン、間隔に使用できます。スタイルシートで単位とプロパティを調整するだけです。

clamp 関数は現代のブラウザーで広くサポートされていますが、古いバージョンでは認識されない場合があります。非常に古いブラウザーをサポートする必要がある場合は、フォールバック値を用意してください。