最小値・最大値・画面幅から、レスポンシブな font-size / gap / padding などの clamp() CSS を生成するツール。px / rem 出力、Tailwind arbitrary value、プレビューに対応。
remでは指定rootを基準に換算します。
最大200文字（絵文字や結合文字は見た目の1文字として数えます）。安全のため入力は UTF-16で4096コード単位までです。
font-size: clamp(16px, calc(9.37016575px + 1.7679558vw), 32px);[font-size:clamp(16px,_calc(9.37016575px_+_1.7679558vw),_32px)]係数: calc(9.37016575px + 1.7679558vw)
CSS clamp() ジェネレーターは、画面幅に合わせて変化するフォントサイズ、余白、幅などのレスポンシブ値を生成するツールです。最小値、最大値、最小ビューポート、最大ビューポートを入力すると、指定した2つの端点を結ぶ一次式を clamp() と calc() で出力します。
既存のフォントサイズ変換ツールが単位変換やタイプスケールを扱うのに対し、このツールはレスポンシブな可変値の設計に特化しています。
font-size をスマホからPCまで滑らかに変化させたいときgap や padding をブレークポイントなしで調整したいとき値は margin では -10000〜10000px、それ以外では 0〜10000pxで指定し、0以外の最小絶対値は0.00001pxです。画面幅は 1〜100000pxで指定します。各数値入力は64文字以内です。最小値は最大値以下、最小画面幅は最大画面幅未満にしてください。丸め後の出力式またはプレビュー式で指定端点を0.00001px以内に再現できないほど差が小さい組み合わせも拒否し、誤ったCSSやプレビューを生成しません。
rem 出力では、最小値・最大値と切片を指定した root px で割ります。vw 係数はビューポート幅に対する割合なので割りません。プレビューは、指定したpx端点と同じ見た目を確認できるようpx換算で表示します。プレビューテキストは最大200文字で、絵文字や結合文字は見た目の1文字として数えます。安全のため入力はUTF-16で4096コード単位までです。
Tailwind CSS 出力は arbitrary property の形式です。プロジェクトの候補検出やCSS生成方針に合うかを確認してください。また、font-size を使う場合はブラウザの文字拡大、320 CSS px相当の狭幅、長い文字列でも読みやすさとリフローを実機確認してください。