お世話になっている比較関数

clamp

clamp()はCSSの関数で、値を上限と下限の間に制限します。

パラメータ

$min
…値の最小値

$val
…値の推奨値

$max
…値の最大値

パラメータの数値は「px」や「em」、「%」など様々な単位が対応可能です。

使用例

横幅が以下の値を維持する四角形を作ります。

• 推奨値は80%
• 200pxを下回らない
• 500pxを上回らない

画面の横幅を伸び縮みしながら下記の「結果」にある黒い四角形を見ると動作が分かりやすいと思います。

※clamp()以外のCSSコードは省略しました。

<span class="box1">clamp</span>

.box1 {
	width: clamp(200px, 80%, 500px);
}

min、max

min()は推奨値と最大値を同時に指定、max()は推奨値と最小値を同時に指定できます。

clamp()は最小値と最大値をどちらも指定する場合に使用しますが、片方だけの制限であればmin()やmax()を使っていきましょう。

パラメータ

$val1, $val2, $val3…
…カンマで区切られた式のリストからmin()の場合は最小の値を最小値に、max()の場合は最大の値を最大値にそれぞれ設定できます。

使用例

横幅が以下の値を維持する四角形を作ります。

• 500pxか80%以上の小さい方（min）
• 200pxか80%以下の大きい方（max）

※min()やmax()以外のCSSコードは省略しました。

<span class="box2">min</span>
<span class="box3">max</span>

.box2 {
	width: min(500px, 80%);
}
.box3 {
	width: max(200px, 80%);
}

まとめ

今回の記事で紹介した比較関数はとても便利で愛用しているのですが、関数名やパラメータの書き方をよく間違えるので、このような形でまとめました。

あらゆるブラウザに対応しているので今後も多用していきたいです。

この記事を読んでいただきありがとうございました。
あなたのお役に立てれば幸いです。ではまた。

【2023.6.13 追記】
ごめんなさい。記事を見返していたらめちゃめちゃ間違っていたので修正しました。