CSS clamp()生成ツール
ビューポート幅とサイズの最小・最大値を入力するだけで、流体タイポグラフィ用の clamp() を自動計算。rem換算とライブプレビューに対応しています。
設定
出力単位
remはアクセシビリティ面で推奨されます。
プリセット
出力 clamp()
clamp()
CSS使用例
font-size: clamp();
プレビュー
1280px
算出サイズ: 24px
流体タイポグラフィのプレビュー Fluid 123
使い方
1
サイズと幅を入力
最小・最大サイズ（px）と、適用したいビューポート幅の最小・最大値を入力します。
2
clamp()を確認
入力と同時に clamp() が自動計算されます。出力単位を px / rem から選べます。
3
コピーして使う
コピーボタンで clamp() を取得し、font-size や padding などのCSSに貼り付けるだけです。
CSS clamp()とは
clamp() は最小値・推奨値・最大値の3つを指定し、ビューポート幅に応じて値を滑らかに変化させるCSS関数です。font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem) のように書くことで、メディアクエリを使わずに流体タイポグラフィ（fluid typography）を実現できます。本ツールは推奨値（傾きと切片）を自動計算します。
機能・特徴
- リアルタイム計算入力と同時に clamp() を即座に算出。待ち時間なしで結果を確認できます。
- rem換算対応ルートフォントサイズを基準に px / rem を切り替え。アクセシブルなrem出力に対応。
- ライブプレビュービューポート幅シミュレーターで、任意の画面幅での算出サイズを確認できます。
- 完全ブラウザ内処理すべての計算はブラウザ内で完結。入力値はサーバーに送信されません。
活用シーン
- 見出し・本文のレスポンシブなfont-size設計
- section間の余白（margin / padding）の流体化
- メディアクエリを減らしたモダンCSS設計
- デザインシステムのタイポグラフィスケール構築
- ボタンやカードの角丸・gapの可変調整
よくある質問
CSS clamp()生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録不要で、ブラウザを開くだけですぐにお使いいただけます。
pxとremはどちらを使うべきですか？
アクセシビリティの観点では rem が推奨されます。ユーザーがブラウザの文字サイズ設定を変更した際にも追従するためです。本ツールはルートフォントサイズ（既定16px）を基準に rem へ換算します。
clamp()の推奨値（真ん中の値）はどう計算されますか？
2点（最小幅・最小サイズ）と（最大幅・最大サイズ）を結ぶ直線の傾きと切片を求め、傾き×100をvw、切片を固定値とした「切片 + 傾き×100vw」を推奨値として出力します。
入力したデータはサーバーに送信されますか？
いいえ、すべての計算はお使いのブラウザ内（JavaScript）で完結します。入力値が外部に送信・保存されることはありません。
clamp()はどのブラウザで使えますか？
Chrome・Edge・Firefox・Safari など主要なモダンブラウザで広くサポートされています。古い環境向けにはフォールバックのfont-size指定を併用すると安心です。
font-size以外にも使えますか？
はい。margin・padding・gap・border-radius・widthなど、長さを指定するあらゆるCSSプロパティで利用できます。