CSSのclamp()で見出しフォントサイズを画面幅に合わせて調整する方法

2026年3月31日

当ページのリンクにはアフィリエイトを含む広告が含まれています。

WordPressで見出しカスタマイズをする時、見出し（h2・h3）のフォントサイズ調整で迷ったことはありませんか？PCとスマホで固定のpxを指定すると、どちらかで大きすぎたり小さすぎたり、スマホで折り返しが変わってしまったりすることがあります。

そこで、便利なCSS関数clamp()があるということをちょっと前に知ったので、備忘録として書き留めたいと思います。

clamp()とは

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

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

画面幅が狭いときは最小値、広いときは最大値を超えないように自動で調整してくれます。pxとvwを組み合わせることで、画面幅に応じてなめらかにサイズが変わります。

WordPressの見出しに使う場合

子テーマのstyle.cssまたは追加cssに以下を追記します。

/* h2見出し */
h2.wp-block-heading {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

/* h3見出し */
h3.wp-block-heading {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}

値の読み方

1.25rem：最小サイズ（小さい画面でもこれ以下にはならない）。
3vw：推奨値。画面幅の3%を基準に伸縮する（例：画面幅1000pxなら30px、500pxなら15px）。ただし最小値と最大値の範囲内に収まるよう自動で制限される。
1.75rem：最大サイズ（大きい画面でもこれ以上にはならない）。

※ここでは、1rem=ブラウザのデフォルトフォントサイズとしています。

clampは見出し以外にも使える

clamp()はfont-sizeだけでなく、paddingやmarginなどの余白、要素の幅にも使えます。「画面幅に合わせてなめらかに変化させたい」という場面であれば、同じ考え方で応用できます。

実際の動きをデモで確認する

ブラウザの幅を変えながら確認してみてください。clampあり・なしの違いがわかります。

See the Pen clamp-font-demo by Rico (@mzwmqbqf-the-bashful) on CodePen.

clampの値を計算するツール

値を自分で計算するのが難しい、面倒だなと思ったら、自動で計算してくれるツールがあります。最小・最大のフォントサイズと画面幅の範囲を入力するだけで、clampの式を生成してくれます。