375px
ここはプレビューされる文字列です
CSS Code
10px
5vw
24px
3
使い方（ジェネレーター）
この CSS Clamp Function Generator を使うと、フォントサイズを視覚的に調整しながら clamp() のCSSコードを生成 できます。
1.最大フォントサイズを調整
「最大フォントサイズ」をスライダーで調整します。
この値がPCサイズでの最大フォントサイズになります。
2.自動計算された最小・推奨サイズを確認
- 最小フォントサイズ (
最大フォントサイズ ÷ 設定基準) - 推奨サイズ (
vw単位で自動計算)
推奨サイズは 自動計算されるので調整不要 です。
3. プレビューで確認
画面サイズを変更すると、以下のようにフォントサイズが変化します：
- スマホ（375px） → 最小フォントサイズ が適用
- タブレット（768px） → 推奨サイズ が適用
- PC（1200px） → 最大フォントサイズ が適用
4.CSSコードをコピー
調整が完了したら、「CSSコードをコピー」ボタンをクリックすると、生成された clamp() のCSSコードを取得 できます。
Webサイトのスタイルシートに貼り付ければ、そのまま使用できます。
この CSS Clamp Function Generator を使えば、フォントサイズをレスポンシブに最適化し、視覚的に調整しながら clamp() のCSSコードを取得 できます。フォントサイズだけでなく、ボタンの余白やコンテナの幅にも応用できるので、ぜひ活用してください！
