CSS clamp()ジェネレーター
clamp()を使って、流動的でレスポンシブなCSSの値を生成します。ビューポートの範囲全体にわたり、最小サイズと最大サイズの間をなめらかにスケーリングします。
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
CSS clamp()ジェネレーターとは何ですか？
CSSのclamp(最小値, 推奨値, 最大値)関数は、値を一定の範囲内に収めつつ、その範囲内でなめらかにスケーリングさせます。ブレークポイントで段階的に切り替わるのではなく、ビューポートの幅に合わせてなめらかに大きくなるレスポンシブなタイポグラフィに最適です。このツールは、最小・最大のフォントサイズとビューポートの幅から、正しい推奨値の数式を計算します。
よくある質問
ブラウザの対応状況はどうですか？▼
clamp()は2020年以降、すべてのブラウザで動作します。本番環境でも完全に安全に使用できます。
関連ツール
カラー変換ツール（HEX/RGB/HSL）
色をHEX、RGB、HSLの各形式間で変換します。視覚的に色を選ぶことも、値を手動で入力することもできます。
CSS box-shadowジェネレーター
CSSのbox-shadow値を視覚的に作成します。リアルタイムでプレビューし、生成されたCSSをコピーできます。
CSSグラデーションジェネレーター
線形および放射状のCSSグラデーションを作成します。視覚的に色を選び、生成されたCSSをコピーできます。
cubic-bezierイージングカーブジェネレーター
CSS用のcubic-bezierイージングカーブを作成します。標準のプリセットも含まれています。
カラーパレットジェネレーター
任意のベースカラーから調和のとれたカラーパレットを生成します。補色、類似色、トライアド、モノクロマティックの各配色に対応しています。
CSS border-radiusジェネレーター
複雑なCSSのborder-radius値を視覚的に作成します。各コーナーを個別にコントロールできます。