無料AIツール集

CSS clamp() 計算機無料・登録不要

最小ビューポート / 最大ビューポート / 最小値 / 最大値 を入れるだけで clamp() 式を自動生成 + 7 ビューポート幅でリアルタイムプレビュー。フルードタイポグラフィ実装に必須。

シェア
最終更新:
所要時間: 約1分

よく使うプリセット

入力

生成された clamp() 式
font-size: clamp(1.000rem, 0.824rem + 0.751vw, 1.500rem);

※ font-size 以外（padding / margin / line-height / gap 等）にも同様に使えます。

ビューポート別 プレビュー

ビューポート幅実際の値ビジュアル
320px16.0pxSample
375px16.0pxSample
414px16.3pxSample
768px19.0pxSample
1024px20.9pxSample
1440px24.0pxSample
1920px24.0pxSample

clamp() 関数の仕組み

clamp(MIN, PREFERRED, MAX) は MIN / MAX を境界として、ビューポート幅に応じて値を線形補間します。

  • MIN: ビューポート幅が小さい時の最小値（モバイル境界）
  • PREFERRED: 「Y切片 + 傾き × vw」の線形式。ビューポート幅に応じて変動
  • MAX: ビューポート幅が大きい時の最大値（デスクトップ境界）

メディアクエリ（@media）の階段状ジャンプではなく、連続的なフルードタイポグラフィが実現できます。Chrome 79+, Firefox 75+, Safari 13.1+ 対応。

💡 よくある使い所
  • Hero タイトル: font-size: clamp(2rem, ...) でモバイル 32px → デスクトップ 72px 滑らかに
  • セクション余白: padding: clamp(2rem, ...) で余白も画面サイズに応じて
  • カード幅: width: clamp(280px, 30vw, 400px)
  • 注意: line-height は clamp() でなく 無次元の倍率（1.5 等）推奨。font-size 連動が壊れない。
  • アクセシビリティ: rem 単位推奨。ユーザーがブラウザ設定で root font-size を変更した時、文字サイズも一緒にスケールする。

関連: カラーコード変換 /Box Shadow 生成 /CSS グラデーション生成

CSS clamp() 計算機の使い方

  1. 1テキストを入力またはペーストします
  2. 2「変換する」ボタンをクリックします
  3. 3結果を確認してコピーします

よくある質問

CSS clamp() 計算機は無料ですか？

はい、完全無料でご利用いただけます。会員登録も不要です。

スマートフォンでも使えますか？

はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。

対応している画像形式は？

PNG、JPG、WebP、GIF、SVG形式に対応しています。

関連ツール

CSSグラデーション生成

CSS Box Shadow ジェネレーター

カラーコード変換

CSS clamp() 計算機について

CSS clamp() 計算機が解決する課題

CSS の `clamp(MIN, PREFERRED, MAX)` 関数はフルードタイポグラフィ（ビューポート幅に応じて滑らかにフォントサイズ変動）を 1 行で実現する強力な機能ですが、PREFERRED 部分の「Y切片 + 傾き × vw」を手計算するのは面倒（線形補間の式を毎回引っ張り出す必要あり）。本ツールは 4 入力（最小ビューポート / 最大ビューポート / 最小値 / 最大値）から clamp() 式を自動生成 + 7 ビューポート幅（320 / 375 / 414 / 768 / 1024 / 1440 / 1920px）でリアルタイムプレビュー。フロントエンド実装が即終わります。

clamp() の仕組み

`clamp(MIN, PREFERRED, MAX)` の挙動:

【MIN】ビューポート幅が小さい時の最小値（モバイル境界） 【PREFERRED】「Y切片 + 傾き × vw」の線形式。ビューポート幅に応じて変動 【MAX】ビューポート幅が大きい時の最大値（デスクトップ境界）

例: モバイル 16px（vw 375）→ デスクトップ 24px（vw 1440）の滑らかなフォント拡大 `font-size: clamp(1rem, 0.789rem + 0.563vw, 1.5rem);`

メディアクエリ（@media）の階段状ジャンプではなく <b>連続的に補間</b>される。

こんなシーンで使えます

【1. Hero タイトル拡大】モバイル 32px → デスクトップ 72px に滑らかにスケール。

【2. セクション余白】padding / margin もビューポートに応じて調整（モバイル 16px / デスクトップ 64px）。

【3. line-height 維持型のフォント拡大】font-size を clamp() で変えつつ line-height は無次元（1.5 等）で固定。読みやすさ維持。

【4. カード幅の流動化】width: clamp(280px, 30vw, 400px) で「画面の 30% だが上下限あり」。

【5. ボタン CTA 文字サイズ】CTA は小さすぎても大きすぎても CV 下がる。clamp で最適レンジ固定。

【6. メディアクエリ削減】@media (min-width:...) の階段式 CSS を clamp() に置き換えてコード量削減。

出力単位 rem vs px

本ツールは <b>rem 推奨</b>。理由:

【アクセシビリティ】ユーザーがブラウザ設定（Chrome の「フォントサイズ」等）で root font-size を変更した時、rem 単位ならフォントも一緒にスケールする。px だと固定で変わらず、視覚障害者・高齢者のアクセシビリティ低下。

【WCAG 2.2 SC 1.4.4】テキストサイズ変更 200% で正常動作の要件 → rem が満たしやすい。

【root 基準】16px が root の場合、1rem = 16px。0.789rem = 12.624px のように小数点許容。

【px が向く場合】border 幅 / 細かい線 / 影など「絶対指定したい場面」のみ px 採用。

よくある失敗と注意点

1つ目: line-height を clamp() で変える → 視覚的に崩壊。<b>line-height は無次元（1.5 等）で固定</b>、font-size 連動を維持。

2つ目: MIN と MAX を逆にする → clamp(MIN, PREFERRED, MAX) の MIN ≤ MAX を必ず守る。本ツールは自動でガードあり。

3つ目: モバイル境界を 375 でなく 320 にする → SE 2nd / SE 3rd（375 = 標準）が最小なのに 320 を最小に設定するとモバイルで小さく表示。

4つ目: vw 単位の罠 → スクロールバー有 / 無で px 値が変動。本番でテスト必須。

5つ目: 古ブラウザ対応忘れ → clamp() は Chrome 79+, Firefox 75+, Safari 13.1+。IE 11 等は完全非対応。fallback で固定 font-size 必要。

6つ目: `min()` / `max()` 関数と混同 → clamp(a, b, c) は max(a, min(b, c)) と等価だが clamp の方が読みやすい。

実装スニペット

```css /* Body 本文（16px → 18px） */ body { font-size: clamp(1rem, 0.987rem + 0.058vw, 1.125rem); line-height: 1.6; }

/* Hero タイトル（32px → 72px） */ h1 { font-size: clamp(2rem, 1.105rem + 3.832vw, 4.5rem); line-height: 1.1; }

/* セクション余白（32px → 96px） */ section { padding: clamp(2rem, 1.211rem + 3.378vw, 6rem) 1rem; }

/* カード幅（280px → 400px） */ .card { width: clamp(280px, 30vw, 400px); } ```