clamp()シュミレーター
画面幅に応じて最小サイズから最大サイズまでフォントサイズを滑らかに自動スケーリングさせるCSSのclamp()コードを生成・シミュレートします。
プレビュー
<div class="fluid-text-container">
<h1 class="fluid-title" style="font-size: clamp({{min_font_rem}}rem, {{calc_intercept}}rem + {{calc_slope}}vw, {{max_font_rem}}rem);">レスポンシブタイトル</h1>
<p class="fluid-desc">このテキストサイズは画面幅（ビューポート幅）に応じて滑らかに変化します。</p>
</div>.fluid-title {
font-size: clamp({{min_font_rem}}rem, {{calc_intercept}}rem + {{calc_slope}}vw, {{max_font_rem}}rem);
}機能・使い方
- 希望する最小と最大の文字サイズ（px）、および基準となるルートフォントサイズ（通常16px）を指定します。
- 画面幅に応じて文字サイズが比例して変化（スケーリング）するCSS
clamp()の指定コードを自動算出します。 - ビューポートの計算基準値はモバイルサイズ（375px）からデスクトップサイズ（1280px）として内部で自動最適化されます。
CSSプロパティの説明
clamp(MIN, VAL, MAX)は、値を最小値（MIN）と最大値（MAX）の範囲内に制限しつつ、推奨値（VAL）に基づいて動的に変化させるCSS関数です。
推奨値にビューポート幅を表す vw 単位と固定値（rem）の組み合わせ（例：1rem + 2vw）を指定することで、画面幅の拡大・縮小に合わせて滑らかに拡大縮小する流体タイポグラフィ（Fluid Typography）を実現します。
計算式は一次関数（y = mx + c）に基いており、画面幅に対する文字サイズの「変化の割合（傾き m）」と「ベースサイズ（切片 c）」を割り出し、それをCSSの構文に最適化して出力しています。
