便利なcss関数「clamp」

こんにちは「たま」です。
前回に引き続きWeb製作のコーティングについてのお話しをしようかと思います。

2022年6月にIEサポートが終了し、IE非対応のために使えなかったCSSが使えるようになりました。
新たに使いやすくなった便利なCSS関数の中でも、レスポンシブ対応で手放せなくなりそうなのが「clamp」です。
木材や石材を接着する際に使うつなぎ金具「クランプ」のイメージでしょうか。「固定する」「位置を保つ」といった意味を持つ英単語です。

幅や大きさを指定する際に「clamp」関数で指定すると、最小値、中間値、最大値をまとめて指定できるのです！
実際に指定する場合は%やvwなど画面に対して相対的な指定と併せて使う形になります。

clamp(100px, 100px + 20% ,500px)

このように指定するだけで、100pxから500pxの間を画面サイズに合わせ滑らかに変更することができます。
この「clamp」関数、画像や枠の大きさだけでなく、特に威力を発揮するのが文字の大きさ指定です。
今はPCだけでなく様々なサイズのタブレットでWebを見る方も多く、スマホも大きいものから小さい物まで様々。
どんな画面でも問題無く見られるようにするのはとても大変です。
今までであれば画面サイズに合わせて何か所も指定が必要だったのが、「clamp」関数でとてもスッキリ書けるようになりました。
ちょっと調整にクセはありますが、うまく使いこなせるようになりたい関数の一つです。