画面の幅で文字の大きさを変えるCSS「clamp()」｜コピペで使える4種類と、式の作り方

スマホで見るとちょうどいい見出しが、パソコンで見ると小さくて迫力がない。パソコンに合わせると、今度はスマホで1文字だけ次の行に落ちる。この「画面の幅によって、ちょうどいい大きさが違う」問題は、CSSの clamp()（クランプ）を使うと、1行で解決できます。画面の幅に合わせて、決めた範囲の中でなめらかに大きさが変わります。

使いどころ

スマホとパソコンで大きさの差を付けたい、大きな見出しや余白に使う。本文の文字は、どの画面でも読みやすい大きさで止めておけばよいので、基本は使わない。

使うのは、範囲を決める clamp() と、画面の幅を基準にした単位 vw、文字の基本の大きさを基準にした単位 rem の3つです。JavaScriptは使いません。

連載「WEBの技術」の11回目です。
今回は動きではなく「大きさ」の話。見た目は地味ですが、スマホで見たときの印象がいちばん変わる技術です。

完成見本：画面の幅で、大きさが変わる

下の枠は、小さな画面（iframe：ページの中に置いた、もう1つのページ）です。幅が 320px（小さめのスマホ）から 1100px（パソコン）まで、自動で広がったり縮んだりし続けています。キャッチコピー・見出し・余白・カードのすき間が、幅に合わせて変わるのを見てください。下の黒い帯に、いまの幅とキャッチコピーの文字の大きさを出しています。

再生中（幅が 320px ⇔ 1100px で変わり続けます）

※ 枠の中は、記事の幅に収まるように縮小して表示しています。黒い帯の数字は、縮小する前の大きさです。

※ 「動きを減らす」設定をオンにしている方には、幅を変えずに 1100px のまま表示しています。ブラウザの窓の幅を変えると、この記事の外でも同じ変化を確かめられます。

幅が狭いうちは、キャッチコピーは 28px のまま変わりません。375px を超えたあたりから大きくなりはじめ、960px あたりで 56px になると、それ以上は大きくなりません。この「下限と上限のあいだで、なめらかに変わる」のが clamp() の働きです。

コピペ用のコード

見本ごとに、HTMLとCSSを並べました。HTMLは使いたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-cl- は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

どれも、スマホの幅 375px で小さいほうの値、960px で大きいほうの値になるように計算しています。

1. 大きなキャッチコピー（28px → 56px）

トップページの一番上に置く、大きな一文です。スマホで28px、パソコンで56px。いちばん差が出るので、clamp() の効果が分かりやすい場所です。

再生中（幅が 320px ⇔ 1100px で変わり続けます）

HTML

<p class="kd-cl-catch">ことばで伝わる<br>ホームページへ</p>

CSS

.kd-cl-catch {
  font-size: clamp(1.75rem, 0.625rem + 4.8vw, 3.5rem);
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

2. 見出し（20px → 40px）

記事やページの見出し（h2）です。スマホで20px、パソコンで40px。見出しが大きすぎてスマホで1文字だけ次の行に落ちる、を防げます。

再生中（幅が 320px ⇔ 1100px で変わり続けます）

HTML

<h2 class="kd-cl-title">サービスのご案内</h2>

CSS

.kd-cl-title {
  font-size: clamp(1.25rem, 0.45rem + 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

3. 区切りの上下の余白（40px → 96px）

clamp() は文字だけでなく、余白にも使えます。区切り（セクション）の上下の余白を、スマホで40px、パソコンで96pxにします。スマホでは詰めて、パソコンではゆったり、が1行で書けます。

再生中（幅が 320px ⇔ 1100px で変わり続けます）

HTML

<section class="kd-cl-section">
  <p class="kd-cl-note">この区切りの上下の余白が、画面の幅で変わります。</p>
</section>

CSS

.kd-cl-section {
  padding: clamp(2.5rem, 0.25rem + 9.6vw, 6rem) 1.25rem;
  background: #F2F8FC;
}

4. カードのすき間（16px → 32px）

カードを横に並べたときのすき間です。スマホで16px、パソコンで32px。並べ方は変えずに、すき間だけを画面に合わせます。

再生中（幅が 320px ⇔ 1100px で変わり続けます）

HTML

<div class="kd-cl-cards">
  <div>WEB</div>
  <div>DESIGN</div>
  <div>SNS</div>
</div>

CSS

.kd-cl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.375rem + 2.7vw, 2rem);
}
.kd-cl-cards > div {
  padding: 16px 8px;
  border-radius: 12px;
  background: #0369A1;
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
}

※ 見本の枠の中に出している黒い帯（幅と値のメーター）は、記事で見せるためだけのものです。コピペ用のコードには入っていません。

仕組み：3つの値で「下限・ふつう・上限」を決める

clamp() の3つの値

clamp() には、カンマで区切って3つの値を書きます。1つ目が下限（これより小さくしない）、2つ目がふつうの大きさ（画面の幅で変わる式）、3つ目が上限（これより大きくしない）です。MDNでは、clamp(最小, 真ん中, 最大) は max(最小, min(真ん中, 最大)) と同じ計算だと説明されています。

書いたもの	意味
1.75rem	下限。28px より小さくしない
0.625rem + 4.8vw	ふつうの大きさ。10px に、画面の幅の4.8%を足した大きさ
3.5rem	上限。56px より大きくしない

vw と rem

vw は、画面（ビューポート：ブラウザの中で、ページが見えている部分）の幅の1%を1とする単位です。幅が 375px なら 1vw は 3.75px、960px なら 9.6px です。画面が広いほど大きくなるので、これを入れると大きさが幅で変わります。

rem は、ページの基本の文字の大きさ（html要素の文字の大きさ）を1とする単位です。多くのブラウザは最初の設定が 16px なので、1rem＝16px として計算しています。見る人がブラウザで文字の大きさを変えると、rem も一緒に変わります。

真ん中の値に 0.625rem + 4.8vw のように rem と vw を足しているのは、この「見る人の文字の設定」を効かせるためです。理由は後半の「見る人への配慮」で説明します。単位の違う値をそのまま足せるのは、clamp() の中では calc()（計算の指定）と同じ書き方ができるからです。

真ん中の式の作り方

「スマホの幅 375px で 28px、960px で 56px」にしたいときの計算です。電卓があればできます。

手順	計算	見本の値
① 大きさの差を、幅の差で割る	(56 − 28) ÷ (960 − 375)	0.0479
② 100倍して vw にする	0.0479 × 100	約 4.8vw
③ 375px のときの vw の分を引く	28 − 375 × 0.048	10px
④ 16 で割って rem にする	10 ÷ 16	0.625rem

①〜④で出た 0.625rem + 4.8vw が真ん中の値です。下限の 28px（1.75rem）と上限の 56px（3.5rem）で前後をはさめば完成です。ほかの見本も、同じ手順で計算しています。

数値を変えるとどうなるか

キャッチコピーの font-size だけを変えて並べました。どれも、上の見本と同じように幅が変わり続けています。

固定・vw だけ・clamp() の違い

文字の大きさを固定 font-size: 32px

画面の幅だけで決める font-size: 6vw

clamp() を使う（見本） clamp(1.75rem, 0.625rem + 4.8vw, 3.5rem)

固定の 32px は、スマホでは大きすぎて行が増え、パソコンでは小さく見えます。6vw だけで決めると、幅に合わせて変わりますが、320px のスマホでは 19px まで小さくなり、パソコンの幅ではどこまでも大きくなります。clamp() は、変わる良さはそのままに、下限と上限で止めます。

真ん中の vw の大きさ

vw を半分に 0.625rem + 2.4vw

見本 0.625rem + 4.8vw

vw を2倍に 0.625rem + 9.6vw

vw を半分にすると、変わり方がゆるやかになり、960px でもまだ 33px ほどです。上限に届くのは、もっと広い画面になってからです。vw を2倍にすると、480px くらいで上限に届いてしまい、タブレットより広い画面ではずっと同じ大きさになります。真ん中の式は、「どの幅で下限、どの幅で上限にしたいか」から逆算して決めるのが、迷わない方法です。

画面の幅	固定 32px	6vw	clamp()（見本）
320px	32px	19px	28px
375px	32px	23px	28px
768px	32px	46px	47px
960px	32px	58px	56px
1280px	32px	77px	56px

スマホと、見る人への配慮

vw だけで文字の大きさを決めない

文字の大きさを 6vw のように vw だけで決めると、見る人がブラウザで文字を大きくしても、ほとんど大きくなりません。W3Cのアクセシビリティの基準（WCAG 2.2）には、文字を200%まで大きくできるようにする項目があり、vw だけで文字の大きさを決めることは、その失敗例として挙げられています。

真ん中の値に rem を足しておくと、文字の設定を大きくした人には、rem の分が大きくなります。下限と上限も rem で書いておけば、こちらも設定に合わせて大きくなります。見本のCSSが px ではなく rem で書いてあるのは、このためです。

上限は、下限の2倍以上にする

MDNの clamp() のページでは、文字の大きさに使うときは、上限を下限の2倍以上にしておくと、拡大したときに200%まで大きくなりやすい、という目安が書かれています。見本のキャッチコピー（28px → 56px）と見出し（20px → 40px）は、ちょうど2倍にしています。

本文には、基本は使わない

本文の文字は、スマホでもパソコンでも、読みやすい大きさはあまり変わりません。16px〜18px の差を付けるために clamp() を使うと、上限が下限の2倍にならず、上の目安を満たせません。本文は 1rem などで決めておき、clamp() は見出しや余白のように、差を付けたいところだけに使います。

スマホの幅で確かめる

clamp() を入れたら、ブラウザの開発者ツールでスマホの幅（375px や 320px）にして、見出しが何行になるかを見ます。下限が大きすぎると、狭い画面で1文字だけ次の行に落ちることがあります。そのときは、下限を少し下げるか、見出しの文を短くします。

数字だけ見ると小さな差ですが、スマホで見出しが2行から1行になるだけで、ページの最初の印象はかなり変わります。
デザインを作るときに、スマホとパソコンの2つの大きさを決めておくと、あとは計算で埋められます。

AIに頼むなら

clamp() の式は、Claudeなどの生成AIに頼んでもすぐ出してもらえます。そのときは、「どの幅で何px」を伝えると、計算まで任せられます。

見出しの font-size を clamp() で書いて。画面の幅 375px で 28px、960px で 56px。
下限と上限は rem、真ん中は「rem + vw」の形で（1rem = 16px）。
本文の文字には使わないので、見出しの分だけでいい。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

真ん中の値が vw だけになっていないか。clamp(1.75rem, 5vw, 3.5rem) のような形だと、文字の設定を大きくしたときに効きにくくなります。rem と vw を足した形かを見ます
計算が合っているか。開発者ツールで幅を 375px と 960px にして、文字の大きさが頼んだ数字になっているかを確かめます。式の数字は、電卓で上の①〜④をやり直しても確かめられます
本文や小さな文字にまで使っていないか。「全部の文字を clamp() にしました」という答えが返ってくることがあります。見出しと余白だけに絞ります

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

トップページの一番上の、大きなキャッチコピー。スマホとパソコンで一番差が出る場所なので、まずここに使います
記事やページの見出し（h2）。スマホで1行に収まり、パソコンでは見出しらしく大きく見えるように、下限と上限を決めます
区切りの上下の余白。スマホでは詰めて、パソコンではゆったり。余白の切り替えを、画面の幅ごとの指定（メディアクエリ）を何段も書かずに1行で済ませられます

使わない場面

本文・ボタンの文字・注意書きなど、小さな文字。どの画面でも読みやすい大きさで止めておくほうが、読む人の設定も効きやすくなります
スマホとパソコンで、並べ方そのものを変えたいとき。2列を1列にする、のような切り替えは、clamp() ではなくメディアクエリやグリッドの役目です
デザインで、スマホとパソコンの大きさが決まっていないとき。何となく vw を入れると、意図しない幅で大きくなりすぎます。先に2つの大きさを決めてから式にします

clamp() は「なめらかに変わる」ところより、「ここより小さく・大きくしない」と決められるところに価値があると考えています。
下限と上限を決めること自体が、デザインの判断です。

まとめ

clamp(下限, ふつう, 上限) で、画面の幅に合わせて、決めた範囲の中で大きさを変えられる
真ん中は「rem + vw」の形にする。vw だけだと、見る人が文字を大きくしても効きにくい
真ん中の式は「どの幅で何px」から、差を割り算して作れる
文字に使うなら、上限は下限の2倍以上が目安。本文には基本は使わない
文字だけでなく、余白やすき間にも使える

まずは「大きなキャッチコピー」のコードをコピーして、ブラウザの窓の幅を変えてみてください。文字が下限と上限のあいだで、なめらかに変わるのが分かります。

参考にした資料

いずれも2026年10月16日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「clamp()」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/clamp
※最小・真ん中・最大の3つの値を取ること、2020年7月から主要なブラウザで使えること、文字に使うときは最大を最小の2倍以上にする目安（英語版で確認）
MDN「calc()」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/calc
※rem と vw のように、単位の違う値を足し算できること
MDN「<length>」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/length
※vw は画面（ビューポート）の幅の1%、rem は html要素の文字の大きさが基準になること
MDN「gap」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/gap
※グリッドなどの並びの、すき間を決める指定
W3C「Understanding SC 1.4.4: Resize Text」
https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
※文字を200%まで大きくしても内容や機能が失われないようにする、という基準
W3C「F94: Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text」
https://www.w3.org/WAI/WCAG22/Techniques/failures/F94
※文字の大きさを vw などだけで決めると、拡大や文字サイズの設定が効かなくなる、という失敗例