1行で、文字サイズなどにメディアクエリを効かせる事ができるclamp関数
次の、css の font-size の指定方法をご覧ください。
.common-text {
font-size: clamp(0.75rem, 4.267vw, 1.5rem);
}
↑これが、css のclamp関数というやつです。
3つの値を指定することができ、
clamp(MIN, VAL, MAX);
のように指定します。
何ができるかと言うと、
こう記述しておくと、なんと
メディアクエリを使用せずとも
柔軟な font-size の指定が、たった1行で指定できてしまうのです！
※もちろん、拾いきれない場合もあるので、その場合はメディアクエリを併用する事になるものの、かなり簡潔な指定になります
各値の意味
clamp(MIN, VAL, MAX);
↑の様に指定すると書きましたが、どんな挙動をするのか。
それは次の様な仕様になっています。
MIN…ここに指定した値を「推奨値が下回る場合」は、最小値が適用される
VAL…MIN, MAXどちらの条件にも当てはまらない場合、この値が適用される
MAX…ここに指定した値を「推奨値が上回る場合」は、最大値が適用される
つまり、冒頭の例でいうと、
「4.267vw が 0.75rem 未満の値になる端末(画面幅)の場合、フォントサイズは 0.75rem」
「4.267vw が 1.5rem より大きい値になる端末(画面幅)の場合、フォントサイズは 1.5rem」
「それ以外は推奨値 4.267vw が使用される」
↑という、ものすごく便利な解釈をしてくれるというわけです。
なお、
4.267vw というのは、
iPhone6, 7, 8 の縦持ち画面サイズ(375px * 667px)の時、およそ
16px に相当する値です。
（※ 375px x 667pxサイズが、モバイルでは最も多いとされているため、それを基準としています）
clamp関数はfont-size以外にも使える
実はこのclamp関数ですが、font-size以外にも使用が可能です。
たとえば、width に使用する場合。
widthの指定を次の様に書けば、font-size の例同様に
なんとも柔軟に、要素の横幅が1行で設定できることになります。
.common-box {
background: #777;
border-radius: 8px;
margin: 0 auto;
width: clamp(calc(100vw - 32px), calc(100vw - 32px), 1200px);
}
↑この例の width の clamp関数 は何をしているかと言うと、モバイル端末では常に左右に16pxの余白を持って横幅いっぱいにする、そして要素の幅が1200pxを超えたら最大1200pxの横幅とする、という指定です。ちなみにclamp関数は、もちろん height にも使えます。
別の書き方
このclamp関数、実は max() , min() を組み合わせた書き方と同じ意味を持ちます。
こちらも一緒に覚えておくと良いかもしれません。
.common-text {
font-size: max(0.75rem, min(4.267vw, 1.5rem));
}
MDNでの解説ページ
Mozilla が運営している、Web技術のオンラインリファレンスである
MDN Web Docs 内に、clamp()、max()、min() それぞれの詳しい解説ページがあります。
いずれも、詳しく仕様が解説されているので一読をおすすめします。
clamp() – CSS: カスケーディングスタイルシート | MDN
max() – CSS: カスケーディングスタイルシート | MDN
min() – CSS: カスケーディングスタイルシート | MDN
ブラウザの対応状況
現時点では、IE11のみが非対応となっています。
このclamp関数に関しては、polyfillも見当たらない(行末の仕様を変えるline-clampはありますが…)ため、
もし制作するWebサイトがIE11対応無しでも良い場合なら、使用可能です。
ただし、来年2022年6月15日には、IE11のサポート期限が公式に満了を迎えるため、
いまから使い慣れておいた方が良いかもしれませんね。
(このclamp()、たぶん今後、今まで以上に一般的に使われる様になる方法だと思うため)
この記事のまとめ
今回は、たった1行のcss指定で
これまでになく柔軟なサイズ指定ができる
clamp() について、記事を書きました。
おそらく今後よく使われることになる指定方法と予想されます。
私自身も実際に何度も使ってみるなりして、
その特徴によく慣れておこうと思ってます。
当サイトは今後も、Web制作に関する様々な記事を書いていく予定です。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。