レスポンシブ フォントサイズ一括生成ツール - 複数プロパティ対応

レスポンシブなフォントサイズ値を一括生成するオンラインツール。ビューポートに応じた clamp()値を出力します。px / rem / em / pc / % の単位に対応。

 使い方

▼プロパティを入力してください

グローバル設定

▼生成されたCSS

使い方

左側のテキストエリアにJSON形式でプロパティを入力し、「生成 »」ボタンをクリックすると、右側にCSS clamp() が出力されます。

📝 入力形式

1行につき1プロパティを JSON 配列形式で記述します。単位は値に含めて入力してください。

["セレクタ", "プロパティ名", "最小値+単位", "最大値+単位"]

例）
[":root", "font-size", "16px", "20px"]
[":root", "--spacing-sm", "8px", "12px"]
[":root", "font-size", "1rem", "1.25rem"]
[".hero__title", "font-size", "1.75rem", "3.5rem"]
[".section", "margin-bottom", "2em", "5em"]

対応単位: px / rem / em / pc / %（省略時は px 扱い）

⚙️ グローバル設定
  • 最小ビューポート： スケールを開始するビューポート幅・px（デフォルト: 360）
  • 最大ビューポート： スケールを終了するビューポート幅・px（デフォルト: 1000）
🧮 計算式
multiplier  = round4( 100 × (最大px − 最小px) ÷ (最大VW − 最小VW) )
vpOffset    = 最小VW ÷ 100  ← 入力単位に合わせて表現

clamp(最小値, calc(最小値 + ((1vw − vpOffset) × multiplier)), 最大値)

rem / em / pc は内部で 1単位 = 16px として px 換算したうえで multiplier を計算します。min / max の出力は入力値をそのまま使用します。

💡 活用例
  • タイポグラフィスケール： h1〜h6のフォントサイズをビューポートに応じて自動調整
  • 余白設計： padding / margin / gap をレスポンシブに変化させる
  • CSS変数一括生成： :root に複数の変数をまとめて定義
関連ツール