clamp()で可変フォントサイズ

このレッスンでは、clamp()関数を使った可変フォントサイズの指定方法を学び、メディアクエリを何度も書かずにレスポンシブな文字サイズを実現できるようになることを目標にします。「CSS clamp 使い方」で調べている方向けです。

clamp(最小値, 標準値, 最大値)を使うと、画面幅に応じて自動で伸び縮みしつつ、小さくなりすぎず・大きくなりすぎないフォントサイズを1行で指定できます。メディアクエリを何個も書かずに済む便利な関数です。

サンプルコードでは、font-size: clamp(1.2rem, 5vw, 3rem);という指定で、画面幅の5%(5vw)を基準にしつつ、最小1.2rem・最大3remの範囲に収まる見出しサイズを実現しています。プレビューの幅を変えながら、文字サイズが連続的に変化する様子を確認してみましょう。

初心者がよくつまずくのが、vwという単位の意味です。1vwは「画面幅の1%」を表す単位で、画面幅に連動して値が変わります。clamp()の中でこの可変単位を使うことで、なめらかな伸縮を実現しているのがポイントです。

スマホでは小さく、パソコンでは大きく、でも極端にはならないように文字サイズを調整したい場面はとても多く、この関数1つで柔軟なタイポグラフィを実現できます。近年のレスポンシブデザインで重宝されるテクニックです。