ひとりCSS Advent Calendar 2022 7日目です。
min(), max(), clamp()を使ってみます。
CSS関数について
CSSの値のひとつ。通常の値より複雑でデータの処理などを行いたいときに使う。
今回使いたいmin(), max(), clamp()のようにかっこがついている。
基本の形
セレクター {
プロパティー: CSS関数名(引数)
}
min()
- 引数が2個。比較して小さい方を返す
-
width: min(50vw, 200px);なら基本は50vwだが200pxより大きくなることはない、みたいな考え方 - clampやcalcの中に入れて使うことがよくあるらしい
max()
- 引数が2個。比較して大きい方を返す
-
width: max(50vw, 200px);なら基本は50vwだが200pxより小さくなることはない、みたいな考え方 - 要は最小値を設定できるためアクセシビリティ考慮する際に便利に使える
- clampやcalcの中に入れて使うことがよくあるらしい
clamp()
- 引数は3個
-
clamp(MIN, VAL, MAX);が基本の形 -
max(MIN, min(VAL, MAX))と同義 -
width: clamp(200px, 50vw, 400px);なら、基本は50vwだけど、最小幅は200px、最大幅は400px
感想
- ウインドウ幅基準でサイズを指定したいが、最小値と最大値を設定したいときに便利に使えそう
- メディアクエリでもいいがどの幅でも印象を変えたくないときはわりとあるのでこういうときに使うといいのかも