CSS clamp()ジェネレーター
clamp()を使って、流動的でレスポンシブなCSSの値を生成します。ビューポートの範囲全体にわたり、最小サイズと最大サイズの間をなめらかにスケーリングします。
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
このツールの使い方
- 1
Enter the minimum size in pixels (the value at and below your small viewport).
- 2
Enter the maximum size in pixels (the value at and above your large viewport).
- 3
Set the min and max viewport widths in pixels that define where scaling starts and stops.
- 4
Read the generated clamp() declaration and click Copy to paste it into your stylesheet.
CSS clamp()ジェネレーターとは何ですか？
CSSのclamp(最小値, 推奨値, 最大値)関数は、値を一定の範囲内に収めつつ、その範囲内でなめらかにスケーリングさせます。ブレークポイントで段階的に切り替わるのではなく、ビューポートの幅に合わせてなめらかに大きくなるレスポンシブなタイポグラフィに最適です。このツールは、最小・最大のフォントサイズとビューポートの幅から、正しい推奨値の数式を計算します。
よくある活用例
Building fluid headings that grow from 24px on mobile to 48px on desktop without writing media-query breakpoints.
Setting responsive body copy that stays readable between a 320px phone and a 1200px laptop.
Scaling section padding or gap values fluidly so layouts breathe proportionally across screen sizes.
Replacing a stack of font-size overrides at 480px, 768px, and 1024px with one clamp() declaration.
Generating clamp() values for a design system so spacing and type scale consistently from one formula.
Quickly checking the px and vw math for a fluid value you sketched out in a design tool like Figma.
よくある質問
ブラウザの対応状況はどうですか？▼
関連ツール
カラー変換ツール（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値を視覚的に作成します。各コーナーを個別にコントロールできます。