目次 [ close ]
  1. はじめに
  2. 使い方
  3. サンプルコード
    1. 1. 文字サイズ（font-size）に使う場合
    2. 2. 余白（padding / margin）に使う場合
  4. 実務で効く！推奨値にcalc()を混ぜるテクニック
  5. 注意：vwだけで指定するとズームが効かない
  6. 対応ブラウザ
  7. さいごに

はじめに

clamp()は、「最小値」「推奨値」「最大値」の3つを設定するだけで、画面幅に合わせて要素のサイズを最適化してくれるCSS関数です。

文字サイズだけでなく、余白（paddingやmargin）にも使えるため、面倒なメディアクエリ（@media）の記述を劇的に減らすことができます。

関連記事
clamp() – CSS | MDN
developer.mozilla.org

使い方

基本の書き方は以下の通りです。

font-size: clamp(最小値, 推奨値, 最大値);
  • 最小値: これ以上小さくならないサイズ
  • 推奨値: 画面幅に応じて変動するサイズ（vw などを使用）
  • 最大値: これ以上大きくならないサイズ

サンプルコード

1. 文字サイズ（font-size）に使う場合

見出しなど、画面幅に合わせて文字を滑らかに拡大・縮小させたいときに便利です。

h1 {
  /* 最小: 20px
     推奨: 5vw（画面幅の5%）
     最大: 40px
  */
  font-size: clamp(20px, 5vw, 40px);
}

2. 余白（padding / margin）に使う場合

コンテナの左右の余白や、セクション間の隙間をレスポンシブにしたいときに大活躍します。

.container {
  /* 左右の余白を、スマホでは16px、PCでは最大40pxにする */
  padding: 0 clamp(16px, 5vw, 40px);
}

.section {
  /* セクション間の下部の余白を、40px〜100pxの間で可変させる */
  margin-bottom: clamp(40px, 8vw, 100px);
}

実務で効く！推奨値にcalc()を混ぜるテクニック

推奨値を 5vw のように vw だけで指定すると、画面幅が狭いスマホで文字が思った以上に小さくなることがあります。そこで実務でよく使うのが、rem と vw を calc() で組み合わせる書き方です。

h1 {
  /* 1rem を下駄として履かせることで、
     画面が小さくても極端に縮まないようにする */
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

こうすると拡大・縮小の「傾き」がゆるやかになり、どのデバイスでも読みやすいサイズに収まります。私はこの書き方を覚えてから、見出しの微調整がほとんど不要になりました。

注意：vwだけで指定するとズームが効かない

アクセシビリティの観点で大事な注意点があります。推奨値を vw 単体にすると、ユーザーがブラウザでズームしても文字サイズが変わらないことがあります。これは目が不自由な方にとって不便です。

上の例のように 必ず rem を混ぜておくと、ズームにもユーザーの文字サイズ設定にも追従できるので安心です。実務では「vw単体で使わない」を合言葉にしています。

対応ブラウザ

clamp() はChrome・Safari・Firefox・Edgeなど、現在のモダンブラウザすべてで問題なく使えます。サポートが終了したIEのことはもう気にしなくて大丈夫です。安心して使っていきましょう！

さいごに

clamp() を使えば、デバイスごとの微調整から解放され、CSSの記述量が驚くほどスッキリします。 文字サイズにも余白にも、ぜひ積極的に使ってみてください！