CSS clamp()の使い方｜文字サイズをレスポンシブに自動調整する方法

レスポンシブコーディングをしていると、

「PCでは32px、スマホでは20pxにしたい」
「画面幅に合わせて文字サイズを少しずつ変化させたい」

ということがあります。

そんなときに便利なのが、CSSのclamp()です。
clamp()を使えば、最小値と最大値を決めたうえで、画面幅に合わせて文字サイズなどを自動的に変化させることができます。

この記事では、CSSのclamp()の基本的な使い方から、レスポンシブ対応での実用例まで分かりやすく解説します。

CSSのclamp()とは？

clamp()は、CSSの値に「最小値・推奨値・最大値」の3つを指定できる関数です。

基本的な書き方はこちらです。

font-size: clamp(最小値, 推奨値, 最大値);

例えば、

font-size: clamp(16px, 3vw, 32px);

と指定した場合、

• 最小：16px
• 基本：画面幅の3%
• 最大：32px

という指定になります。

画面幅が変化すると3vwを基準に文字サイズも変化しますが、16pxより小さくならず、32pxより大きくならないように制限してくれます。

clamp()を使うメリット

メディアクエリを減らせる

従来のレスポンシブ対応では、PCとスマートフォンで文字サイズを変更するために、メディアクエリを使うことがよくあります。

例えば、

.title {
  font-size: 32px;
}

@media screen and (max-width: 767px) {
  .title {
    font-size: 20px;
  }
}

といった指定です。

これでも問題ありませんが、PCとスマートフォンの切り替わりで文字サイズが一気に変化します。

clamp()を使えば、

.title {
  font-size: clamp(20px, 3vw, 32px);
}

のように1行で指定できます。

さらに、画面幅に合わせて20pxから32pxの間を滑らかに変化させることができます。

タブレットなど中間サイズにも対応しやすい

PCとスマートフォンだけでなく、その中間にはタブレットなどさまざまな画面サイズがあります。

clamp()を使って可変値を設定しておけば、こうした中間サイズでも自然なサイズに調整しやすくなります。

clamp()の3つの値

もう少し詳しく見てみましょう。

font-size: clamp(16px, 3vw, 32px);

clamp()には3つの値があります。

1つ目：最小値

16px

これ以上小さくしたくない値です。

今回の場合、画面幅が小さくなっても文字サイズは16px未満にはなりません。

2つ目：推奨値

3vw

基本的に使用される値です。

vwは画面幅（viewport width）を基準にした単位で、1vwは画面幅の1%です。

例えば画面幅が1000pxなら、

1vw = 10px
3vw = 30px

となります。

3つ目：最大値

32px

これ以上大きくしたくない値です。

画面幅がどれだけ広くなっても、今回の指定では32pxを超えません。

clamp()で文字サイズを指定する例

例えば見出しを、スマートフォンでは20px、PCでは40px程度にしたい場合、

.title {
  font-size: clamp(20px, 4vw, 40px);
}

といった指定ができます。

ただし、ここで注意したいのが、

「真ん中の値を何vwにすればいいの？」

という問題です。

なんとなく3vwや4vwを指定して調整することもできますが、デザインカンプ通りに実装したい場合は少し面倒です。

例えば、

• 375pxの画面 → 20px
• 1440pxの画面 → 40px

のように、特定の画面幅に対して正確なサイズを指定したいケースがあります。

この場合はcalc()を組み合わせることで、指定した範囲でサイズを滑らかに変化させることができます。

clamp( )とcalc( )を組み合わせる

例えば、

• 最小画面幅：375px
• 最大画面幅：1440px
• 最小文字サイズ：20px
• 最大文字サイズ：40px

とします。

この条件から計算すると、次のようなCSSを作ることができます。

font-size: clamp(
  20px,
  calc(20px + (40 - 20) * ((100vw - 375px) / (1440 - 375))),
  40px
);

これによって、

375px以下では20px、

375px〜1440pxでは画面幅に合わせて20pxから40pxへ変化、

1440px以上では40px、

という動きになります。

clamp()の計算が面倒ならジェネレーターを使う

ここまで読んで、
「便利そうだけど毎回計算するのは面倒……」
と思った方もいるかもしれません。

そこで、画面幅とサイズを入力するだけでclamp()を自動計算できる無料ツールを作りました。

CSS clamp()ジェネレーター

https://web-create-kokusyo.com/tools/

最小・最大の画面幅とサイズを入力すると、レスポンシブ対応に使えるclamp()のCSSを自動生成できます。
生成されたCSSはそのままコピーして使用できます。

font-size以外にもclamp()は使える

clamp()は文字サイズだけに使うものではありません。

例えば余白にも使用できます。

.section {
  padding-top: clamp(40px, 8vw, 100px);
  padding-bottom: clamp(40px, 8vw, 100px);
}

画面幅に合わせてセクションの余白を調整できます。

横幅にも使用できます。

.box {
  width: clamp(300px, 80vw, 1000px);
}

このように、

• font-size
• margin
• padding
• width
• gap

など、さまざまなCSSプロパティで活用できます。

clamp()を使うときの注意点

clamp()は便利ですが、何でも可変にすればいいわけではありません。

特に文字サイズを画面幅に合わせて極端に小さくすると、スマートフォンで読みづらくなる可能性があります。

そのため、

font-size: clamp(16px, 2vw, 24px);

のように最低サイズを設定しておくことが重要です。

また、デザインによっては画面幅に応じて滑らかに変化させるより、メディアクエリで明確に切り替えた方が実装しやすい場合もあります。
clamp()とメディアクエリを使い分けるのがおすすめです。

まとめ

CSSのclamp()を使うと、最小値と最大値を設定しながら、画面幅に応じてサイズを変化させることができます。

基本形は、

clamp(最小値, 推奨値, 最大値)

です。

レスポンシブ対応では特に、

font-size
padding
margin
gap

などの調整に便利です。

ただし、デザインカンプに合わせて正確な値を計算しようとすると、毎回計算するのは少し大変です。

そんなときは、CSS clamp()ジェネレーターを使えば、必要な数値を入力するだけでCSSを自動生成できます。

CSS clamp()ジェネレーター

https://web-create-kokusyo.com/tools/

レスポンシブコーディングの効率化に、ぜひ活用してみてください。