無料AIツール集

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

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

シェア
最終更新:
所要時間: 約1分
編集: Free AI Tools JP 編集部

よく使うプリセット

入力

生成された 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() 計算機の判断基準

画面幅に応じてフォントサイズや余白を滑らかに変化させる clamp() 式を生成するツールです。生成された式をコピーする前に、下の基準で「最小・最大・中間の挙動」を確認すると、特定の画面幅だけ崩れる事故を防げます。

  • 最小値・最大値が実際の画面幅で確認できているか

    clamp() は設定した最小ビューポートより狭い画面では最小値、最大ビューポートより広い画面では最大値に固定されます。まずこの両端の値が、想定する最小・最大の画面でそれぞれ妥当なサイズかを確認します。

  • 中間の計算式の意味を理解しているか

    生成される式の中央（PREFERRED）は「基準値 + 画面幅に比例する項」という一次式で、2点（最小ビューポートでの最小値、最大ビューポートでの最大値）を直線でつないだものです。この意味を理解しておくと、中間の画面幅でどんな値になるかを自分で説明でき、調整もしやすくなります。

  • 中間のビューポート幅でもプレビューしたか

    両端が良くても、タブレット相当の中間幅で大きすぎたり小さすぎたりすることがあります。複数のビューポート幅でのプレビューを確認し、変化の傾きが急すぎないかを見ます。

  • 単位の選択（rem / px）に理由があるか

    フォントサイズに使う場合、rem ベースの式ならユーザーがブラウザの文字サイズ設定を変えたときにも追従しやすくなります。px で固定する場合は、その値がユーザー設定に追従しなくてよい値かを考えてから選びます。

  • line-height は固定したまま font-size だけ変化させているか

    font-size を clamp() で可変にする場合、line-height は 1.5 のような単位なしの値で指定しておくと、フォントサイズに比例して行間も追従します。行間まで別の clamp() で動かすと挙動の予測が難しくなります。

  • 生成した式を実際のブラウザで幅を変えながら確認したか

    式の上では正しくても、実環境ではスクロールバーの有無などでビューポート幅の実値が想定と微妙に違うことがあります。本番に入れる前に、実際のブラウザの幅を動かしながら表示を確認します。対象環境での動作確認も推奨します。

ありがちな失敗例（NG → 改善）

NGデスクトップ幅のプレビューだけ見て、生成された clamp() 式をそのまま本番に入れる。

改善最小幅・最大幅・中間幅の3点以上で、実際のブラウザの幅を動かしながらサイズの変化を確認する。

→ clamp() は画面幅の全域で値が変わる仕組みなので、1つの幅での見た目だけでは妥当性を判断できません。

NG中間の式（0.789rem + 0.563vw のような部分）の意味が分からないまま、数値を手で書き換えて微調整する。

改善調整したいときは元の4つの入力値（最小・最大ビューポートと最小・最大値）を変えて再生成する。

→ 中間の式は4つの入力から導かれた一次式です。式の一部だけ手で変えると、両端の値と整合しなくなります。

NG最小値より最大値が小さい入力（例: 最小 24px・最大 16px）で式を作ろうとする。

改善「狭い画面で小さく、広い画面で大きく」を基本に、最小値 ≤ 最大値の関係を確認してから生成する。

→ clamp(MIN, PREFERRED, MAX) は MIN ≤ MAX が前提の関数です。大小関係が逆だと意図した挙動になりません。

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); } ```