clamp関数を使って、柔軟なフォントサイズ指定を行う方法[css]

clamp関数を使って、柔軟なフォントサイズ指定を行う方法

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 の縦持ちportrait画面サイズ(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制作に関する様々な記事を書いていく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。