レスポンシブの救世主！CSS clamp() で文字サイズを自在に操る

2026年3月2日

HTML/CSS

目次 [ close ]

はじめに

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