CSS Clamp計算ジェネレーター

CSS clamp() は「最小値・推奨値・最大値」の3つを引数に取るCSS関数で、ビューポート幅に応じて値を滑らかに変化させることができます。たとえば font-size: clamp(1rem, 2.5vw, 2rem) と指定すると、スマートフォンでは 1rem、大画面では 2rem を上限に、その間は画面幅に比例してフォントサイズが自動的に可変します。メディアクエリなしでレスポンシブなタイポグラフィや余白を実現できるモダンCSSの重要テクニックです。このツールは線形補間の計算式（y = ax + b）を自動で処理し、コピーするだけで使えるコードを即座に生成します。

• プロパティ接頭辞の切り替え
  font-size・margin・padding・width・gap から対象プロパティをワンクリックで選択。コードの接頭辞が自動的に切り替わるため、毎回手動で書き直す手間がありません。
• CSS・Sass（SCSS）・Tailwind CSS の3形式出力
  CSS形式ではそのまま貼り付けられる clamp() コードを生成。Sass形式では再利用可能な @function を出力。Tailwind形式では tailwind.config.js の extend セクションへそのまま貼れる記述を生成します。
• ルートフォントサイズのカスタム
  1rem の基準となるルートフォントサイズを変更できます（デフォルト 16px）。10px ベース設計（html { font-size: 62.5% }）を採用しているプロジェクトでは 10 に変更してください。
• アクセシビリティ自動診断
  WCAG 2.1 のテキストリサイズ基準をもとに、最小値と最大値の比率を自動チェック。最大値が最小値の2倍以上ある場合は警告、適切な範囲では合格を表示します。
• ブラウザ幅リアルタイムプレビュー
  ウィンドウを縮小・拡大するだけで、現在の幅での計算値がリアルタイムに変化します。値の変化グラフとも連動し、現在位置をマーカーで示します。font-size 選択時はテキストサンプルのサイズも追従します。

• 線形補間（1次関数）y = ax + b
  clamp() の推奨値（preferred値）は ax + b の形で表されます。x がビューポート幅（vw）、a が傾き（slope）、b が切片（intercept）です。最小VPと最大VPの差に対する最小・最大サイズの差から傾きを求め、切片をpx→remへ変換して算出します。
• 傾き（slope）の計算
  slope = (maxSize - minSize) / (maxVP - minVP)。これが vw 値の係数になります。たとえば375px→1280pxの間に16px→32pxへ変化させる場合、傾きは約0.0177になります。
• 切片（intercept）の計算
  intercept = minSize - slope × minVP。この値をルートフォントサイズで割ってremに変換します。切片がマイナスになるケースも正常で、clamp()の最小値と最大値がリミッターとして機能します。

• レスポンシブフォントをメディアクエリなしで実装したい
  ブレークポイントごとにfont-sizeを書かず、一行のclamp()で済ませたい場面に最適です。
• WordPressテーマやSassプロジェクトで関数化したい
  Sass形式出力の @function をコピーしてプロジェクト共通ファイルに貼り付けるだけで、数値を渡すだけの再利用可能な計算機能として使えます。
• TailwindCSSのtheme設定にclamp値を追加したい
  Tailwind形式でコピーすれば tailwind.config.js の extend.fontSize や extend.spacing に直接貼り付けられます。
• 余白（margin・padding）もメディアクエリなしで可変させたい
  プロパティ選択でmarginやpaddingを選ぶと、セクション間の余白・コンテナの上下パディングをclampで流動的に管理できます。
• デザインシステムのスペーシングスケールを作りたい
  複数のサイズ（S・M・L・XL等）をそれぞれこのツールで計算し、CSSカスタム変数やSass変数としてまとめて管理するワークフローに活用できます。