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コードを取得 できます。フォントサイズだけでなく、ボタンの余白やコンテナの幅にも応用できるので、ぜひ活用してください!