【CSS】clamp()で文字サイズを自動可変にする魔法の1行

Webサイトを作っていて、「PCだとちょうどいい文字サイズなのに、スマホで見ると文字が大きすぎて改行が不自然になる…」という経験はありませんか？

これまでは、スマホ用・タブレット用・PC用に合わせて「メディアクエリ（@media）」を使って、ブレイクポイントごとにfont-sizeを何度も書き直すのが当たり前でした。

しかし現在は、最新のCSS関数であるclamp()を使うことで、たった1行で画面サイズに合わせて文字を滑らかに伸縮させることができます。

clamp()関数の書き方と仕組み

clamp()は、「最小値」「推奨値」「最大値」の3つを指定するだけで、その範囲内で自動的にサイズを可変させてくれる魔法の関数です。

/* clamp(最小値, 推奨値, 最大値) */
.kz-fluid-text {
    font-size: clamp(16px, 5vw, 24px);
}

上記のコードは、以下のような意味になります。

• 基本（推奨値）： 画面幅の5%（5vw）のサイズで表示する
• 最小値： 画面がどれだけ小さくても 16px よりは小さくしない
• 最大値： 画面がどれだけ大きくても 24px よりは大きくしない

実際の動作デモ（画面幅を変えてみてください）

百聞は一見に如かず。以下のボックス内のテキストは、clamp()を使って実装しています。PCで見ている方は、ブラウザのウィンドウ幅をゆっくり狭めてみてください。

画面幅に応じて、カクッ！と変わるのではなく、ゴムのようにシームレスに文字サイズが伸縮しているのが分かるはずです。

余白（paddingやmargin）にも使える！

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

/* 画面幅に応じて余白を20px〜60pxの間で変動させる */
section {
    padding-top: clamp(20px, 8vw, 60px);
}

これを活用すれば、「PCでは余白を広くとってリッチに見せつつ、スマホでは余白を狭めてコンテンツを詰め込む」といった高度なレスポンシブデザインが、たった1行で実現します。

これまで何十行も書いていたメディアクエリの束から卒業できるclamp()関数。実務のコーディングスピードを飛躍的に上げてくれる強力な武器になりますので、ぜひご自身のサイトやクライアントワークで積極的に取り入れてみてください。