CSS
A function that adjusts values based on screen size while keeping them within a minimum and maximum range.
clamp()
clamp()
は、CSSで数値(主に幅や文字サイズなど)を「最小値・理想値・最大値」の3つをセットで指定して、画面の大きさに応じて自動でバランスよく調整してくれる関数です。
たとえば、clamp(1rem, 2vw, 2rem)
と書けば、
- 小さすぎる画面では1rem以下にならず、
- 通常は画面幅の2%で伸び縮みし、
- でも大きすぎる画面では2rem以上にはならない、
というふうに、見やすさとデザインの安定感を両立できます。
つまり、「柔軟に変わるけど、変わりすぎない」という便利な機能です。