CSS clamp() 流体タイポグラフィ生成ツール
ローカル処理最小・最大ビューポート幅とサイズ境界から、画面幅に合わせて滑らかに伸縮するCSS clamp()式を計算・生成します。
使い方と処理基準
最小・最大ビューポート幅とサイズ境界から、画面幅に合わせて滑らかに伸縮するCSS clamp()式を計算・生成します。
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
処理制限
- 最大入力文字数: 100,000文字
モバイルでは小さく、デスクトップでは大きく見えるレスポンシブな文字・余白を、メディアクエリなしで1行で作ります。結果は1rem = 16px基準のremで出ます。
できること
- 線形補間
- 最小幅で最小サイズ、最大幅で最大サイズになるよう傾きを計算します。
- rem単位
- ユーザーのフォントサイズ設定を尊重するremで書きます。
CSS clamp() 流体タイポグラフィ生成ツールの使い方
- 1サイズを入力最小・最大サイズ（px）を入れます。
- 2画面幅を入力適用する最小・最大の画面幅（px）を入れます。
- 3CSSをコピーfont-sizeなどに貼って使います。
活用例
16px → 32px（360〜1280px）
入力: 16, 32 / 360, 1280
結果: clamp(1rem, 0.6087rem + 1.7391vw, 2rem)
主な利用シーン
- レスポンシブな見出しの文字サイズ
- 画面幅に応じて大きくなる余白・間隔
よくある質問 (FAQ)
remが16pxでない場合は？
ルートのフォントサイズを変えているなら、結果のremの値もその比率で変わります。このツールはブラウザの既定値16pxを基準に計算します。