【CSS】min(),max(),clamp()を使ってみる
2024.03.19 Posted by Coding_team
こんにちは、クリエイターブログです。今回はCSSの関数min(),max(),clamp()について紹介したいと思います。
これらの関数は、今まで複数行書いていたCSSを1行にまとめられる便利関数です。
関数名の通り最小値、最大値などを定義する際に役立ちます。
まず初めにいつも通り、対応ブラウザを確認してみます。以下をご覧ください。
→min() max() clamp()” | Can I use… Support tables for HTML5, CSS3, etc
問題無く使っても良さそうですね。では関数の説明を実例を交えてしていきます。
min()
min()はCSS関数で、CSSプロパティの値としてカンマで区切られた式のリストから最小の (最も負である)値を設定できます。
|
1 |
width: min(80%, 600px); |
と設定したとすると、ウィンドウ幅に応じて小さいほうの値が選択されます。
つまり、以下と同義になります。
|
1 2 |
width: 80%; max-width: 600px; |
max()
max()はCSSの関数で、CSSプロパティの値としてカンマで区切られた式のリストから最大の(最も正である)値を設定できます。
|
1 |
width: max(80%, 300px); |
と設定したとすると、ウィンドウ幅に応じて大きいほうの値が選択されます。
つまり、以下と同義になります。
|
1 2 |
width: 80%; min-width: 300px; |
clamp()
clamp()はCSSの関数で、値を上限と下限の間に制限します。clamp()によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。
|
1 |
width: clamp(300px, 50%, 600px); |
と設定したとすると、ウィンドウ幅に応じて値が3つの中から選択されます。
- 推奨値≦最小値 のときは最小値が適応される
- 推奨値≧最大値 のときは最大値が適応される
- どちらにも当てはまらない場合は推奨値が適応される
少しわかりずらいですが、以下と同義になります。
|
1 2 3 |
width: 50%; min-width: 300px; max-width: 600px; |
まとめ
実際にmin(),max(),clamp()を用いたDEMOを用意しました。
これまでに例として挙げた値を設定しているのでウィンドウ幅を縮めてみたりして確認してください。
→DEMO
主にリキッドレイアウトをコーディングする際、width、font-sizeプロパティなどに使用する形になりそうですね。
CSSの記述量も減るのでコードもキレイになるのも地味に大きい利点です。
関数の詳細な仕様に関しては開発者向けドキュメントをご参考ください。
以上クリエイターブログでした。
関連記事こちらの記事も合わせてどうぞ。
