CSS clamp() ジェネレーター
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);ビューポート幅ごとの計算サイズ
360px
16.3px
768px
19.7px
1024px
21.9px
1440px
24px
関連する外部ツール
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
JSON整形ツール貼り付けるだけで JSON を読みやすく整形、または1行に圧縮できます。壊れた JSON は何行目・何列目がおかしいかをハイライト表示。Base64 変換テキストと Base64 を相互変換。日本語・絵文字も文字化けしない（UTF-8 対応）、URL セーフ Base64、画像を data URL に変換。ブラウザ完結・送信なし。正規表現テスター正規表現をその場でテスト。マッチのハイライト・キャプチャグループ・フラグ・置換プレビューに対応。ブラウザ完結・送信なし。JSON→TypeScript型JSONを貼ると対応するTypeScriptのinterface/typeを生成。ネスト・配列マージ・optional/null対応。ブラウザ完結・送信なし。
ビューポートの範囲にわたって最小サイズから最大サイズへ滑らかにスケールするCSS clamp() 値を生成します。レスポンシブなタイポグラフィや余白に最適です。サイズを入力し、ライブプレビューで確認してコピーするだけ。すべてブラウザ内で動作します。
使い方
- 最小サイズと最大サイズをピクセルで設定します。
- スケールさせるビューポート幅の範囲を設定します。
- 生成されたclamp()値をコピーし、プレビューで各幅での表示を確認します。
仕組み
ツールは2点（最小ビューポートでの最小サイズと最大ビューポートでの最大サイズ）を結ぶ直線を引きます。その直線がremオフセットとvw傾きで表される推奨値になります。clamp()はその値を最小・最大で固定し、2つのブレークポイント間で滑らかにスケールさせます。
機能
真の流動スケーリング
メディアクエリで段階的に切り替えるのではなく、ブレークポイント間で滑らかに補間します。
rem + vw 出力
remとvwを使うことでユーザーのフォント設定を尊重し、アクセシビリティを維持します。
ライブプレビュー
代表的なビューポート幅ごとの計算済みピクセルサイズを確認できます。
カスタムルートフォント
ルートフォントサイズを設定してrem値をプロジェクトに合わせます。
コピー即使用
font-size宣言ごとCSSに貼り付けられる形でコピーできます。
活用シーン
流動的なタイポグラフィ
モバイルからデスクトップまで見出しや本文テキストを滑らかにスケールさせます。
余白・ギャップ
同じ考え方をpadding・margin・グリッドのgapにも適用します。
タイプスケール
ビューポートに合わせて各ステップがスケールするレスポンシブなタイプスケールを構築します。
一貫性の確保
複数のメディアクエリの代わりに、シンプルで予測可能なclamp()1行で統一します。
メモ
- 最大ビューポートは最小ビューポートより大きくする必要があります。
- 値はルートフォントサイズ（デフォルト16px）を基準にremを使います。
- 傾きが急すぎると中間サイズで読みにくくなることがあります。
- すべてデバイス上で動作します。アップロードはありません。
よくある質問
- clamp()は何をしますか？
- clamp(min, preferred, max)は値を最小と最大の間に収めつつ、推奨値がその間でスケールできるようにします。レスポンシブなサイズ指定に最適です。
- vwだけ使うより何が良いのですか？
- vwだけでは際限なく縮小・拡大し続けます。clamp()は上限・下限を設けるため、極端に小さい画面や大きい画面でもテキストが読みやすい大きさに保たれます。
- pxでなくremを使う理由は？
- remはユーザーのブラウザフォントサイズ設定を尊重するため、固定pxよりアクセシビリティが向上します。
- 流動的なタイポグラフィはアクセシブルですか？
- 適切な最小サイズを設定し極端な傾きを避ければアクセシブルにできます。remを使うことでユーザーがテキストを拡大できます。ズームや大文字設定で必ずテストしてください。
- データはサーバーに送られますか？
- いいえ。clamp()値はすべてブラウザ内で生成されます。