【CSS】clamp()とは？レスポンシブな文字サイズ・幅指定の使い方を解説

clamp()は、CSSの値を「最小値以上、最大値以下」の範囲に収めながら、画面幅などに応じて自動調整できる関数です。CSSでレスポンシブ対応をしていると、「スマホでは小さく、PCでは大きくしたいけれど、大きくなりすぎるのは困る」という場面があります。

この記事では、clamp()の基本、font-size・widthでの使い方、min()・max()との違い、実務での注意点まで解説します。

CSSのclamp()とは？

clamp()とは、指定した値を一定の範囲内に収めるCSS関数です。

.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

この例では、文字サイズが1.5remより小さくならず、3remより大きくならない範囲で、画面幅に応じて変化します。

clamp()の基本構文

clamp()は、次の3つの値をカンマで区切って書きます。

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

値	意味	例
最小値	これより小さくしない	1.5rem
推奨値	基本的に使いたい可変値	4vw
最大値	これより大きくしない	3rem

clamp(1.5rem, 4vw, 3rem)は「基本は4vwで変化させる。ただし1.5rem未満にも3rem超えにもならない」という意味です。

clamp()は値の順番が重要です。左から「最小値、推奨値、最大値」の順番で書きます。

clamp()で文字サイズをレスポンシブにする方法

clamp()が特に便利なのは、見出しや本文の文字サイズをレスポンシブに調整したい場面です。

見出しサイズを画面幅に合わせて変える

.hero-title {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.2;
}

この指定では、スマホでは1.75rem程度に収まり、画面幅が広がるにつれて大きくなり、PCでは最大3.5remで止まります。

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

従来の書き方では、画面幅ごとに文字サイズを切り替えることがありました。

.hero-title {
  font-size: 28px;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 56px;
  }
}

.hero-title {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
}

clamp()を使うと、複数のブレイクポイントを書かなくても、なめらかにサイズを変えられます。

見出しのレスポンシブな文字サイズは、font-size: clamp(最小値, vwを含む推奨値, 最大値);で作るのが実務でも便利です。

clamp()をwidthや余白に使う実例

clamp()は、文字サイズだけでなく、横幅や余白にも使えます。

カード幅を広がりすぎないようにする

.card {
  width: clamp(280px, 50vw, 520px);
}

この例では、カード幅が最低280px、最大520pxに収まり、その間は画面幅に応じて変化します。

セクション余白を画面幅に合わせる

.section {
  padding-block: clamp(48px, 8vw, 120px);
}

スマホでは余白を抑え、PCでは余白を広くできます。LPや採用ページなど、余白のリズムを整えたい場面で便利です。

余白にclamp()を使う場合、最大値を大きくしすぎるとPCで間延びします。実際の画面で余白の見え方を確認しましょう。

min()・max()・clamp()の違い

clamp()と一緒に覚えたいのが、min()とmax()です。

関数	役割	例
min()	小さい方を採用する	width: min(90%, 960px);
max()	大きい方を採用する	font-size: max(1rem, 2vw);
clamp()	最小・推奨・最大の範囲に収める	font-size: clamp(1rem, 2vw, 2rem);

迷ったらclamp()を使う場面

「小さすぎても困るし、大きすぎても困る」という場面では、clamp()が向いています。

たとえば、見出し、余白、カード幅、ボタン幅などです。

clamp()が効かない原因と対策

原因1：カンマや順番を間違えている

clamp()は3つの値をカンマで区切ります。

.title {
  font-size: clamp(3rem, 5vw, 1.5rem);
}

最小値と最大値が逆になっているため、意図した動きになりません。clamp()は値の順番が重要です。左から「最小値、推奨値、最大値」の順番で書きましょう。

.title {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

原因2：推奨値に固定値だけを書いている

推奨値に固定値だけを書くと、画面幅に応じた変化が起きません。

.title {
  font-size: clamp(1.5rem, 2rem, 3rem);
}

レスポンシブに変化させたい場合は、vwなど画面幅に連動する単位を含めます。

.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

原因3：アクセシビリティを考えていない

文字サイズにclamp()を使う場合、最小値が小さすぎると読みにくくなります。また、最大値や推奨値に相対単位を使わないと、ユーザーの拡大設定に追従しづらい場合があります。

本文サイズにclamp()を使う場合は、最小値を小さくしすぎないようにしましょう。まずは見出しから使うのがおすすめです。

clamp()の実務チェックリスト

確認項目	見るポイント	対策
値の順番	最小・推奨・最大になっているか	clamp(min, preferred, max)で確認する
可変値	推奨値にvwなどがあるか	画面幅に連動する単位を入れる
最小値	スマホで小さすぎないか	実機で読みやすさを確認する
最大値	PCで大きすぎないか	デザイン上の上限を決める
用途	細かな切り替えが必要か	必要ならメディアクエリも併用する

実務で使いやすいclamp()の決め方

clamp()は便利ですが、適当に4vwや8vwを入れるだけだと、画面幅によって文字が急に大きくなったり、思ったより変化しなかったりします。

実務では、まず「最小値」と「最大値」をデザイン上の読みやすさから決め、そのあとに「推奨値」を調整する流れがおすすめです。

手順1：スマホで読める最小値を決める

たとえば見出しなら、スマホで小さすぎないサイズを先に決めます。

.section-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

この場合、1.5remが最小値です。本文に近いサイズまで小さくすると見出しとして弱くなるため、見出しなら1.5rem以上から試すと扱いやすいです。

手順2：PCで大きくなりすぎない最大値を決める

次に、PCでの最大サイズを決めます。

.section-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

この場合、最大値は3remです。大画面でもこれ以上大きくなりません。横幅が広いモニターで見たときに、見出しだけが巨大になりすぎる事故を防げます。

手順3：推奨値はremとvwを混ぜる

推奨値にvwだけを書くと、画面幅に対して変化が強くなりすぎることがあります。実務では、remとvwを組み合わせると自然な変化になりやすいです。

.section-title {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

1rem + 2vwのように書くと、基本サイズを保ちながら画面幅に応じて少しずつ大きくできます。

clamp()の推奨値は、vwだけでなくrem + vwの形にすると、急激なサイズ変化を抑えやすくなります。

clamp()を使ったデザインパターン

ここからは、実務でよく使うclamp()のパターンを紹介します。

パターン1：見出しだけ流体的に変える

本文サイズまでclamp()で細かく変えると、読み心地の調整が難しくなることがあります。最初は見出しだけに使うのがおすすめです。

body {
  font-size: 1rem;
  line-height: 1.8;
}

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
  line-height: 1.2;
}

.section-title {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height: 1.35;
}

このように、本文は安定させ、見出しだけ画面幅に合わせて変えると、デザインの印象を作りやすくなります。

パターン2：カード間の余白を調整する

余白にclamp()を使うと、スマホで詰まりすぎず、PCで広がりすぎないレイアウトを作れます。

.card-list {
  display: grid;
  gap: clamp(16px, 3vw, 40px);
}

スマホでは16px程度、PCでは最大40pxまでの範囲で余白が変化します。

パターン3：本文エリアの横幅を制御する

読み物系の記事では、本文幅が広すぎると1行が長くなり、読みにくくなります。

.article-body {
  width: min(100%, 760px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

この例では、本文幅は最大760pxに抑えつつ、左右余白は画面幅に合わせて調整しています。

clamp()を使うときのアクセシビリティ注意点

clamp()は見た目を整えるのに便利ですが、文字サイズに使う場合は読みやすさへの配慮が必要です。

最小値を小さくしすぎない

スマホで画面に収めたいからといって、最小値を小さくしすぎると、読者にとって読みづらい記事になります。

.lead {
  font-size: clamp(0.75rem, 2vw, 1rem);
}

本文やリード文で0.75remまで小さくなると、読者によってはかなり読みづらく感じます。

.lead {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

ズーム時の見え方を確認する

ブラウザの拡大表示を使うユーザーもいます。記事ページやLPでclamp()を使う場合は、100%表示だけでなく、125%や150%に拡大した状態も確認しましょう。

特に本文サイズへclamp()を使う場合は、拡大表示で文字が極端に詰まらないか、行間が狭くなっていないか確認してください。

clamp()を使うべき場面・使わない方がいい場面

場面	おすすめ度	理由
大きな見出し	高い	画面幅に合わせた印象調整がしやすい
セクション余白	高い	スマホとPCの余白を自然につなげられる
カードのgap	高い	グリッド全体の密度を調整しやすい
本文サイズ	中くらい	読みやすさの確認が必要
厳密な高さ指定	低い	中身の量によって崩れやすい

迷った場合は、まず見出しと余白だけに使ってみるのが安全です。サイト全体の本文サイズまで一気に変えると、ブラウザや端末ごとの見え方確認が増えます。

公式ドキュメントも確認する

clamp()の仕様を正確に確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs clamp()
• MDN Web Docs min()
• MDN Web Docs max()

 

まとめ：clamp()はレスポンシブなサイズ調整に便利

この記事では、CSSのclamp()について解説しました。

clamp()は、最小値・推奨値・最大値を1行で指定し、値を安全な範囲に収めながらレスポンシブに変化させるCSS関数です。特に、見出しのfont-size、セクション余白、カード幅などで使うと、メディアクエリを増やしすぎずに柔軟なデザインを作れます。

まずは、font-size: clamp(1.5rem, 4vw, 3rem);のような見出しサイズから試すと、効果が分かりやすいでしょう。