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

こんにちは。

画面の幅によって文字の大きさを変えたい時などに、メディアクエリを使って設定するのって結構面倒ですよね。

また、画像を大きく表示するときに「基本的には全体の半分の大きさ、しかし最大値は400px」といった場合、 「max-width: 400px」「width: 100%」とどちらも設定しなければならなかったりします。

今回は色々な場合に柔軟に対応できる比較関数について学んだことを綴っていきます。

目次

clamp

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

パラメータ

$min
…値の最小値

$val
…値の推奨値

$max
…値の最大値

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

使用例

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

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

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

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

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

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

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%);
}
min max

まとめ

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

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

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

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