メディアクエリを重ねずに、画面幅へ滑らかに追従するCSSを生成します。最小と最大の値を指定するだけでclamp()の式を計算し、実際の画面幅での見え方をその場で確認できます。
画面幅に応じて文字の大きさが滑らかに変わります。
画面幅の適用範囲（px）
値の範囲（px）
rem換算の基準です。通常は16pxのままで構いません
見出しや本文の文字サイズ
.target {
font-size: clamp(1rem, 0.586rem + 1.768vw, 2rem);
}中央の可変値には rem と vw を組み合わせた式を使用しています。vw単体で指定するとブラウザのズームが効かなくなるため、この形が推奨されます。
CSS clamp() 生成ツール（Fluid Typography・流体タイポグラフィ）とは？
本ツールは、画面幅に応じて値が滑らかに変化するCSSのclamp()関数を自動計算するジェネレーターです。最小画面幅と最大画面幅、そのときの値を指定すると、最小値・可変式・最大値の3つを組み合わせた1行のコードが生成されます。従来のようにブレイクポイントごとに@media を書き重ねる必要がありません。
対象はfont-size に限りません。padding、gap、margin、width、border-radius といったプロパティも選択でき、余白やレイアウトの可変にも使えます。さらに、本文の基準サイズと比率から注釈から大見出しまでの7段階をCSS変数として一括生成するモードを備えており、デザインシステムのタイポグラフィをそのまま実装へ落とし込めます。
生成された式は画面幅シミュレーターで検証できます。スライダーを動かすとその幅での実際のピクセル値がプレビューへ反映され、グラフでも変化を確認できます。値はrem基準で出力されるため、ブラウザの文字サイズ設定を壊しません。
こんなシーンで便利です
見出しのレスポンシブ対応
スマートフォンから大画面まで、1つの定義で最適な見出しサイズを維持。メディアクエリの記述量を大幅に削減できます。
セクション余白の可変
paddingやgapを画面幅に連動させることで、狭い画面では詰まり、広い画面ではゆとりのあるレイアウトになります。
デザインシステムの実装
本文サイズと比率からタイプスケールを一括生成。CSS変数として定義すれば、サイト全体を1箇所で調整できます。
アクセシビリティの確保
rem基準の計算により、利用者がブラウザで文字サイズを拡大した場合でも比率を保ったまま追従します。
使い方は簡単 4ステップ
- 「単一の値を計算」か「タイプスケールを一括生成」のいずれかのモードを選びます。
- 基準となる最小画面幅と最大画面幅、それぞれの値を入力します。
- 画面幅シミュレーターのスライダーを動かし、各幅での実際のサイズを確認します。
- CSS・CSS変数・Tailwind・SCSSから出力形式を選び、コードをコピーします。
※ルートのfont-sizeは入力欄から変更できます。html要素に独自の指定をしているプロジェクトでは、実際の値と一致させてください。
ご利用時の注意点
- clamp()の構造：clamp(最小値, 可変値, 最大値) の形式です。可変値には rem と vw を組み合わせた式を使用し、vw単体にはしません。
- アクセシビリティ：px指定はブラウザの文字サイズ変更を無視するため、font-sizeでは rem 出力を推奨します。px出力を選ぶと画面上に注意が表示されます。
- 入力値の検証：最小画面幅が最大画面幅以上の場合や、最小値が最大値を上回る場合は警告を表示し、壊れたコードを出力しないよう傾きの符号を調整して生成します。
- line-heightについて：行の高さは単位なしの数値で指定するのが基本です。remで固定すると文字サイズを変えたときに行間が追従しなくなります。
- px と rem の単純な換算はCSS単位変換ツール、余白の段階設計はスペーシングシステム作成もあわせてご利用ください。
画面幅ごとの計算値シミュレーション（早見表）
最小幅375px（16px）から最大幅1280px（32px）に設定した場合、本ツールが生成する clamp(1rem, 0.586rem + 1.768vw, 2rem) の計算結果です。
| 画面幅 | 計算されるサイズ | rem換算 | 想定デバイス |
|---|---|---|---|
| 320px | 16.0px（下限で固定） | 1.000rem | 小型スマートフォン |
| 375px | 16.0px | 1.000rem | iPhone標準サイズ |
| 600px | 20.0px | 1.249rem | 小型タブレット・縦持ち |
| 768px | 22.9px | 1.432rem | タブレット横持ち |
| 1024px | 27.5px | 1.717rem | ノートPC・標準モニター |
| 1280px | 32.0px | 2.000rem | デスクトップ（上限に到達） |
| 1920px | 32.0px（上限で固定） | 2.000rem | 大画面ディスプレイ |
【アクセシビリティ上の必須ルール】
clamp()の中央の可変値には、必ず rem と vw を組み合わせた式 を使ってください。clamp(1rem, 5vw, 2rem) のように vw 単体で指定すると、利用者がブラウザのズームや文字サイズ設定を変更しても値が変わらず、WCAGの基準を満たさなくなります。本ツールが生成するコードはこの問題を自動的に回避します。
よく使われる設定値
- h1見出し：2rem 〜 4rem（32px 〜 64px）
- h2見出し：1.5rem 〜 2.5rem（24px 〜 40px）
- 本文：1rem 〜 1.125rem（16px 〜 18px）
- セクション余白：2rem 〜 6rem（32px 〜 96px）
代表的な画面幅
- モバイル：320px / 375px / 390px
- タブレット：768px / 834px
- デスクトップ：1024px / 1280px / 1440px
- 大画面：1920px 以上
clamp()を実プロジェクトへ導入する際の設計方針とチーム運用の進め方
単発の計算にとどまらず、デザインシステムへの組み込み、和文特有の注意点、ビルド環境との統合まで含めた実務的な考え方を整理します。
計算式を直接書かず、CSS変数のスケールとして定義する
生成した式を各コンポーネントへそのまま書き込むと、サイト全体のリズムを調整したくなったときに修正箇所が散らばります。:root に --step-0 から --step-4 のような段階としてのカスタムプロパティを定義し、各要素はその変数だけを参照する構成にしてください。本ツールのタイプスケール一括生成はこの形で出力するため、そのまま貼り付ければデザインシステムの基礎になります。比率を変えたくなったときも、1箇所の差し替えで全体が追従します。
和文では欧文より小さく見えるため、最小値を下げすぎない
同じ数値でも、日本語は欧文よりも字面が複雑で小さく見えます。欧文の見本で調整したスケールをそのまま和文サイトへ適用すると、本文が読みづらくなることが少なくありません。
本文の最小値は16px を下限とし、注釈でも14px を下回らない設計が安全です。本ツールのプレビューは和文と欧文を切り替えられるため、実際の日本語テキストで見え方を確認してから数値を確定してください。
最大画面幅を超えた領域で値が伸び続けないようにする
clamp()の最大値を設定しない、あるいは自力で計算した式に上限を入れ忘れると、1920pxや4Kモニターで見出しが際限なく巨大化し、ファーストビューのレイアウトが崩壊します。
本ツールは指定した最大画面幅に達した時点で値が固定される式を生成するため、この問題は起こりません。グラフで上限に到達する位置を確認し、想定する最大コンテンツ幅と一致しているかをチェックしてください。
コンテナクエリとの使い分けと、ビルド環境への組み込み
clamp()とvwは画面幅に連動します。一方、サイドバーの中とメインカラムの中で同じカードの見え方を変えたい場合は、コンテナクエリ（cqi単位）の方が適しています。ページ全体のリズムはclamp()、コンポーネント単位の適応はコンテナクエリという住み分けが現実的です。
また、ページ数の多い制作では、算出した式をSassの関数やMixinとして共通化するか、ビルド時に変換する仕組みを用意すると、記述ミスと検証工数を削減できます。
clamp()によるレスポンシブ指定でよくある失敗と対策
可変値にvw単体を使い、ブラウザのズームや文字サイズ変更が効かなくなる失敗
clamp(16px, 4vw, 32px) のように、可変値をvwだけで組み立ててしまうケースです。見た目は画面幅に追従して正しく動くため気づきにくいのですが、利用者がブラウザの文字サイズを大きくしても値が一切変わりません。弱視の方にとっては拡大手段が失われることになり、アクセシビリティの評価を下げる原因になります。
💡 対策・解決策を見る▼
最小値と最大値をpxで固定し、文字サイズ設定が反映されない失敗
可変部分はremにしていても、clamp()の第1引数と第3引数をpxのまま書いてしまうケースです。この場合、上限と下限に張り付く画面幅では結局サイズが固定され、ブラウザの文字サイズ変更が反映されません。特にスマートフォンの小さい画面では下限に張り付くことが多く、影響を受ける利用者が少なくありません。
💡 対策・解決策を見る▼
画面幅の指定を誤り、傾きが計算できず壊れたコードを出力する失敗
最小画面幅と最大画面幅に同じ値を入れたり、最小のほうが大きい値になっていたりすると、傾きの計算で0除算や負の値が発生します。自力で計算している場合、結果として `+ -3vw` のような構文エラーを含む式や、`Infinity` を含む式が生成され、そのプロパティ自体が無効になります。
💡 対策・解決策を見る▼
メディアクエリと併用して記述が重複し、かえって複雑になる失敗
従来の書き方の癖で、ブレイクポイントごとにfont-sizeを上書きしたうえでclamp()も併用してしまうケースです。どちらが効いているのか追えなくなり、記述量削減というclamp()本来の利点が失われます。修正のたびに複数箇所を確認する必要が生じ、メンテナンス性が著しく低下します。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.clamp()の中央の値にvwだけを指定してはいけないのはなぜですか
A. ブラウザのズームや文字サイズ変更が効かなくなるためです。vwは画面幅にのみ連動する単位なので、利用者がブラウザの設定で文字を大きくしても値が変化せず、アクセシビリティの基準を満たさない状態になります。本ツールはremとvwを組み合わせた式を生成するため、画面幅への追従と利用者の設定の尊重を両立できます。
Q.フォントサイズ以外の余白や幅にも使えますか
A. 使えます。対象のCSSプロパティからpadding、gap、margin-bottom、width、border-radiusなどを選択でき、それぞれに適したコードが出力されます。セクションの上下余白を画面幅に応じて可変にすると、メディアクエリを何段階も書かずに、スマートフォンでは詰まり、デスクトップでは広がるレイアウトを1行で実現できます。
Q.見出しh1からh6までをまとめて生成することはできますか
A. できます。タイプスケールの一括生成モードでは、本文の基準サイズと比率を指定するだけで、注釈から大見出しまでの7段階をCSS変数として一括出力します。狭い画面と広い画面で別々の比率を指定できる点が特徴で、モバイルでは比率を抑えて見出しが過大にならないようにしつつ、デスクトップでは比率を上げて階層を明確にする設計が可能です。
Q.実際の画面幅でどのくらいのサイズになるか確認できますか
A. 確認できます。画面幅シミュレーターのスライダーを動かすと、その幅における計算結果が実際のピクセル値としてプレビューに反映されます。375px、768px、1280pxなど代表的な幅はボタンで切り替えられ、画面幅に対する変化をグラフでも確認できます。和文と欧文を切り替えられるため、日本語での見え方も事前に検証できます。
Q.ルートのフォントサイズが16px以外の場合はどうなりますか
A. ルートのfont-sizeは入力欄から変更でき、その値を基準にrem換算が行われます。html要素に独自のfont-sizeを指定しているプロジェクトでは、必ず実際の値と一致させてください。16px以外を指定した場合は画面上に注意が表示されます。なお、html要素のfont-sizeをpxで固定する設計自体が利用者の設定を上書きするため、可能であれば避けることを推奨します。
Q.入力した数値が外部に送信されることはありますか
A. ありません。本ツールの計算とコード生成はすべてお使いのブラウザ内で完結する完全ローカル処理型です。入力された画面幅やサイズの数値が外部サーバーへ送信されることも、データベースに保存されることもありません。開発中のプロジェクトの設計値を扱う場合でも安全にご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。