📐 CSS clamp() 生成（流体タイポ）

CSS の clamp() は clamp(最小, 推奨, 最大) の3つの値を取り、実際には「推奨値を計算し、それを最小と最大の範囲に収める」関数です。推奨値が最小より小さければ最小に、最大より大きければ最大に固定され、その間なら推奨値がそのまま使われます。本ツールは、最小サイズ・最大サイズと、それを適用する最小・最大のビューポート幅から、画面幅に応じて滑らかに伸縮する clamp() を自動生成します。

流体タイポグラフィ（fluid typography）は、この推奨値にビューポート幅に比例する vw と、位置合わせ用の定数を組み合わせて作ります。vw はビューポート幅の1%（1vw＝画面幅の1/100 px）なので、vw の項だけだと画面幅に正比例して増減します。そこへ切片となる定数を足すことで、「最小ビューポート幅ではちょうど最小サイズ、最大ビューポート幅ではちょうど最大サイズ」を通る直線を引けます。計算は、傾き slope＝(最大サイズ−最小サイズ)÷(最大VW−最小VW)、切片 yInt＝最小サイズ−slope×最小VW（px）とし、推奨値＝(yInt/ルート)rem＋(slope×100)vw で表します。例えば最小16px・最大24px・375〜1440px・ルート16pxなら、slope≒0.007512、切片≒13.1831px（≒0.8239rem）、vw係数≒0.7512vw となり、clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem) が得られます。この式は幅375pxで16px、幅1440pxで24pxをちょうど通ります。

定数の項を px ではなく rem で書くのは、ユーザーのフォント設定を尊重するためです。rem はルート要素（html）の font-size を基準にする相対単位なので、閲覧者がブラウザの文字サイズを大きくすると rem の項も一緒に拡大します。px 固定にしてしまうと、vw の項だけがズームに追従して定数は動かず、拡大時に文字が意図より小さく感じられることがあります。rem を使うことでアクセシビリティ（ユーザーの文字拡大）とレスポンシブの両立がしやすくなります。本ツールの「ルート font-size」がこの rem 換算の基準です。

メディアクエリ（@media）との違いは、変化のなめらかさです。メディアクエリは「幅768px以上ならこのサイズ」のように、ブレークポイントを境にサイズが段階的にカクッと切り替わります。clamp() による流体タイポは、最小VWと最大VWの間ではビューポート幅に応じて連続的にサイズが変わるため、どの画面幅でもバランスよく見え、ブレークポイントごとの上書きも減らせます。最小・最大でしっかり頭打ちになる点もメディアクエリの「ここから固定」と同じ安心感があります。

使いどころは、見出しの font-size のほか、セクション間の余白（margin・padding）、行間（line-height を長さで指定する場合）、要素の幅など、画面幅に応じて伸縮させたいあらゆる長さです。特に見出しは、スマホで大きすぎず・PCで小さすぎずに収めたい場面が多く、clamp() の効果が出やすい対象です。最小サイズは可読性の下限、最大サイズはレイアウトが崩れない上限として決めると使いやすくなります。