前回の記事はこちら

clamp()関数とは？

前回の記事で紹介したrem指定から、さらにレスポンシブに特化したサイズ指定がclamp()です。

clamp()は、要素のサイズを、最小値、推奨値、最大値の範囲で自由自在にコントロールできるCSS関数です。

clamp()を使うことで、画面幅に応じて要素サイズが滑らかに変化するため、よりシームレスなレスポンスデザインを実現できます。

clamp()は、フォントサイズや、マージン、パディング、要素の幅や高さなど、あらゆるサイズ指定で利用できます。

clamp()関数の使い方

clamp()は、最小値、推奨値、最大値の 3 つの引数を取り、clamp(最小値, 推奨値, 最大値)のように指定します。

たとえば、画面幅が767px以下であれば、1remになり、1200px以上であれば、1.5remになり、その間であれば、文字サイズは画面幅に応じて1rem〜1.5remを推移するようにしたい場合、以下のように指定します。

css

font-size: clamp(1rem, 0.114rem + 1.85vw, 1.5rem);

推奨値の0.114rem + 1.85vwは、一体何を書いているんだと思うかもしれません。
実はclamp()で推奨値を導き出すには複雑な計算が必要になります。
推奨値の計算にはわたしはこの自動計算ツールをよく使っています。

上述の0.114rem + 1.85vwもこの自動計算ツールで算出したものです。

clamp()のメリットはなんといってもメディアクエリを使わずにレスポンシブデザインを実現できることでしょう。

また、最大値、最小値も同時に設定できることも何気にポイントが高いなと思います。どんなに画面幅が大きく（小さく）なっても、指定した範囲内でサイズが収まってくるので、意図せぬサイズになりにくいです。

clamp()関数は、レスポンシブデザインにおいて非常に強力なツールです。メディアクエリに頼らず、より柔軟で洗練されたレイアウトを実現したい場合は、ぜひ活用してみてください。