この記事をおすすめしたい人
- CSSでマージンやフォントサイズを可変にしたい人
- CSSのclamp関数に興味がある人
- つまりオレ
今回はCSSのclamp()という関数について紹介します。
いやー僕はこの手のCSSの関数、全然知らなくて。
最近は勉強がてらChatGPTくんにコンセプトだけ伝えてどう書いてくるかなと試してるんですが、その中で知りました。
個人的にはめちゃくちゃ強いCSSです。
利便性もさることながら、ほぼどのサイトでも使いどころがありそうな機能になっています。
clamp関数の概要
clampは幅やフォントサイズを指定できる関数で、設定する値(10vwとか)とセットで最大値と最小値をセットすることができます。 詳しい情報はMDNを見てください。
例えばセクション間のすき間を、以下のようにしたいとします。
- 画面幅が1000pxの時は100px
- それ以上の画面幅では100px固定
- 幅が小さくなっていくに従って徐々に小さくしていく
- スマホでも60pxは欲しい
これをメディアクエリで書くとこう↓なります。
.section-spacing {
margin-bottom: 10vw;
}
@media (min-width: 1000px) {
.section-spacing {
margin-bottom: 100px;
}
}
@media (max-width: 767px) {
.section-spacing {
margin-bottom: 60px;
}
}
clampで書くとたった1行でこう↓なります。
.section-spacing {
margin-bottom: clamp(60px, 10vw, 100px);
}
前から順に、最小値、規定値、最大値の順に書くだけ。
clampはどんなケースで強いか
サイズを指定する箇所で、画面幅によって可変にしたくて、レイアウトの都合で上下加減を設定したい箇所なら割とどこでも使えそう。 それもめちゃくちゃ便利に。
さっきのようにマージンやパディングを設定する場所もそうだし、タイトルやテーブルなんかのフォントサイズもそう。
例えば、画面幅の3％のフォントサイズにしたくて、FHDフルスクリーンで表示されても30pxよりは大きくならず、スマホでも20pxは欲しい、みたいなケースだとメディアクエリだとこう↓なりますが、
h2 {
font-size: 3vw;
}
@media (min-width: 1000px) {
h2 {
font-size: 30px;
}
}
@media (max-width: 767px) {
h2 {
font-size: 20px;
}
}
clampを使うとこの↓通り。
h2 {
font-size: clamp(20px, 3vw, 30px);
}
この「メディアクエリを使う頻度が減る」というのがめちゃくちゃ便利で、知ってからはかなり多用してます。
上限下限を簡単に分かりやすく設定できるのも強みで、視認性が非常によく、メンテナンスもしやすいです。 vwで単位指定する場合は必ずclampをセットで使った方がいいかもしれない。
clampのブラウザ対応状況
これだけ便利だと非対応ブラウザを覚悟してましたが、Can I useによるといわゆるモダンブラウザでは全部使えるっぽい。
IEではバージョンを問わず使えないですが、
もうね、IEの呪縛からは解放されていいよね。
あとはOpera Miniってので使えないみたいですが、ChatGPTくんによるとインドやアフリカのモバイル端末で使われてるようです。 うちは日本語なので気にしなくてよさそう。