MRRI

Webサイトをレスポンシブ対応する中で、フォントサイズの調整は意外と手間がかかるポイントです。
画面が大きくなれば文字も大きくしたいし、スマホでは読みやすいサイズを保ちたい…。

そんなときに便利なのが、CSS関数のclamp()です。

clamp()とは？

clamp()は3つの値を引数に取り、「最小値・理想値・最大値」を指定することで、
ビューポート幅などに応じて値がスムーズに変化するCSS関数です。

h1 {
　font-size: clamp(1.5rem, 2vw, 3rem);
}

この例では：

• ・最小値：1.5rem
• ・理想値：2vw
• ・最大値：3rem

つまり、

• ・画面がとても狭いときは 1.5rem が適用され、
• ・画面の幅が広くなると 2vw に基づいてサイズが大きくなり、
• ・それでも最大で 3rem までに制限されます。

従来の方法では、media queryを使ってブレイクポイントごとにフォントサイズを指定していましたが、clamp()なら、1行で滑らかな変化を実現でき、コードもシンプルです。

フォント以外にも使える！

clamp()はフォントサイズだけでなく、以下のような場面でも使えます。

• ・paddingやmargin
• ・widthやheight
• ・gapやgrid-template-columnsなどのレイアウト調整

clamp()を使えば、レスポンシブ対応ももっとスムーズに!
ぜひ取り入れてみてくださいね！