FIRST CH TOOLS / デザイン / 43 CSS CLAMP CALCULATOR

CSS clamp() フルイドタイポグラフィ計算機

「375pxのとき24px・1280pxのとき40px」と決めるだけで、その2点を直線でつないだ clamp(最小, vw式, 最大) を作ります。メディアクエリで段階的に切り替えるかわりに、画面幅に合わせて連続的に変化させる書き方です。ウィンドウ幅のスライダーで実際の見え方を確かめられ、rem基準で出力すればブラウザの文字サイズ設定にも追従します。

2点を決めると式ができます

最小ビューポート幅（ここから大きくなり始める） px

最大ビューポート幅（ここで止まる） px

最小サイズ（最小幅のときの値） px

最大サイズ（最大幅のときの値） px

出力の単位ルートのフォントサイズ px = 1rem

プロパティ名小数点以下

生成した式

clamp(1.5rem, 1.0856rem + 1.768vw, 2.5rem)

font-size: clamp(1.5rem, 1.0856rem + 1.768vw, 2.5rem);

—

いまのプレビュー幅での値

—

傾き（幅100pxあたり）

—

vw の係数

—

切片（rem項）

ライブプレビュー

ウィンドウ幅 768px → 32px

見出しはここまで大きくなります Aa 0123

プレビューの文言

スライダーはブラウザのウィンドウ幅を仮に動かした場合の値を計算して見せています（実際にウィンドウを縮めても同じ結果になります）。

幅ごとの計算値

ビューポート幅	計算値	rem	状態

チェック結果

px と rem の静的な換算（24px は何remか・スケール表）は PX ⇄ REM / EM 単位変換にあります。こちらは幅に応じて変化する式を作るツールです。要素の縦横比を保つ計算はアスペクト比計算、文字色と背景色の読みやすさはコントラスト比チェッカーで確かめられます。

見出しから注釈までまとめて作ります

最小幅でのベースサイズ（step 0） px

最大幅でのベースサイズ（step 0） px

最小幅での比率（1段ごとの倍率）倍

最大幅での比率（1段ごとの倍率）倍

段の範囲〜変数名比率のプリセット

ビューポート幅（最小・最大）と単位・ルートのフォントサイズは「式をつくる」タブの設定を共有します。

段ごとの式

段	最小幅	最大幅	clamp()

CSS（カスタムプロパティ）

式の中身と、踏みやすい落とし穴

clamp(最小, 希望値, 最大) の3つの引数

ブラウザは希望値を計算し、それが最小を下回れば最小・最大を上回れば最大を使います。希望値に vw（ビューポート幅の1%）を含めると、画面幅に比例して値が動きます。clamp(a, b, c) は max(a, min(b, c)) と同じ意味です。

なぜ「rem + vw」の2項になるのか

2点（最小幅・最小サイズ）と（最大幅・最大サイズ）を通る直線を引くと y = 傾き × x + 切片になります。傾き＝(最大サイズ − 最小サイズ) ÷ (最大幅 − 最小幅)、切片＝最小サイズ − 傾き × 最小幅です。x（画面幅px）は 100vw と等しいので、傾きを100倍したものが vw の係数になり、切片はサイズなので rem で書きます。だから式は必ず「◯rem + △vw」の2項になります。

vw だけで書いてはいけない

希望値を 4vw のように vw だけで書くと、ブラウザの文字サイズ設定を大きくしても文字が変わりません。WCAG 2.2 の達成基準 1.4.4（テキストのサイズ変更・200%まで拡大できること）に触れる可能性があります。切片を rem で持つ2項の式にしておけば、拡大時にその項が伸びるので追従します。このツールが px 出力より rem 出力を勧めるのはこのためです。

最小 > 最大になったら clamp は最小を返す

CSSの clamp() は最小値が優先されるため、clamp(40px, …, 24px) と書くと常に40pxになります。値を小さくしていきたい（幅が広いほど小さい）場合は、最小値の位置に小さいほうを書く必要があります。このツールは自動でその順に並べ替えたうえで警告を出します。

ルートのフォントサイズは16pxとは限らない

rem は html 要素のフォントサイズ基準です。既定は16pxですが、利用者がブラウザで変更していれば別の値になります。CSSで html { font-size: 62.5% } のように書き換えている場合は、このツールの「ルートのフォントサイズ」も10pxに合わせてください（合わせないと出力した rem が実寸と食い違います）。

フォントサイズ以外にも使える

余白（padding・gap・margin）、要素の幅、角丸、行間の絶対値など、長さを取るプロパティならそのまま使えます。プロパティ名の欄を書き換えると、その名前で宣言を出力します。ただし比率で決まる値（line-height の数値指定など）には使いません。

横スクロールと vw の注意

vw はスクロールバーを含んだ幅を指すため（Windows のスクロールバーが出る環境では実際の表示領域より数px広い）、幅ぴったりのレイアウトに vw を使うと横スクロールが出ることがあります。文字サイズや余白に使うぶんには実害はほぼありませんが、width に使うときは注意してください。

対応ブラウザ

clamp() は Chrome 79 / Safari 13.1 / Firefox 75（いずれも2020年前半）以降で使えます。現在のブラウザではフォールバックを書く必要はほぼありませんが、必要なら font-size: 24px; を先に書いて次の行で clamp を上書きします。

How to Use

2点を入力する「最小幅のときのサイズ」と「最大幅のときのサイズ」を決めます。既定は 375px→24px・1280px→40px です。入力と同時に式ができます。
スライダーで確かめるウィンドウ幅を動かすと、その幅での実際の値とプレビュー文字が変わります。最小幅より狭い側・最大幅より広い側では値が止まることも確認できます。
コピーして貼る「式をコピー」で clamp(…) だけ、「宣言をコピー」で font-size: clamp(…); を取れます。型スケールのタブではカスタムプロパティを一括で書き出せます。

About This Tool

フルイドタイポグラフィは「2点を決めて直線で結ぶ」だけの計算です。メディアクエリで 24px → 32px → 40px と段階的に切り替えると、切り替わる瞬間に文字が飛び、境界のすぐ手前が窮屈になります。clamp() なら間を連続的に埋められるので、どの幅でも意図どおりの大きさになります。このツールは、入力した2点を通る直線の傾きと切片を求め、傾きを vw・切片を rem に置き換えた式を出しています（計算式は「しくみと注意点」タブに書いてあります）。

rem 基準を既定にしています。希望値を vw だけで組むと、ブラウザの文字サイズ設定を大きくしても文字が拡大されず、WCAG 2.2 の達成基準 1.4.4 に抵触するおそれがあります。切片を rem で持つ「◯rem + △vw」の形にしておけば、利用者が文字を大きくしたぶんだけ式全体も持ち上がります。px 基準の出力も選べますが、その場合はチェック結果に警告を出します。

最小・最大の外側では値が止まります。clamp() は希望値を最小と最大で挟むので、最小ビューポート幅より狭い画面では最小サイズのまま、最大ビューポート幅より広い画面では最大サイズのままになります。表とスライダー下のバーで、どの区間が固定でどの区間が流体かを確認できます。最小幅を320px未満に、最大幅を2560px超に置く必要はありません（その外側はどのみち固定値になるため）。

型スケールのタブは、同じ計算を段ごとに繰り返しています。ベースサイズに比率（1.2倍など）を掛けた等比数列を最小幅・最大幅それぞれで作り、段ごとに clamp() を組みます。最大幅側の比率を少し大きくすると、広い画面ほど見出しと本文の対比が強くなる設計になります。出力は --step-0 のようなカスタムプロパティなので、そのまま :root に貼って font-size: var(--step-2) で使えます。

静的な px⇄rem 換算とは別のツールです。「24px は 1.5rem」のような固定の換算やスケール表は PX ⇄ REM / EM 単位変換にあります。こちらは幅に応じて変化する補間式を作ります。計算はすべてブラウザ内で完結し、入力はサーバーへ送信されません。URLパラメータで直接呼び出せます: /clamp/?minvw=375&maxvw=1280&min=24&max=40 ／ /clamp/?min=16&max=20&unit=px&prop=padding