CSSのclamp()関数と、フォントサイズの設定方法
CSSで使われるclamp()関数は、
最小値(min)・推奨値(preferred)・最大値(max)の３つを設定できる関数で、
最小値〜最大値までの値をとります。
font-size: clamp(min, preferred, max);
ブラウザも、主要ブラウザ(IE以外)では問題なく使うことができ、
レスポンシブ対応するのに便利なclamp()関数について深めていきたいと思います。
Clamp()とは？
Clamp()で使われている3つの数値の意味ですが、
例えば、下記のような書き方があった場合
/*書き方の例*/
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
最小値は 1 rem、
推奨値は 0.5 rem + 2 vw、
最大値は 2 rem
になります。
この場合フォントサイズは、0.5rem + 2vwを基準として、
1remより小さくなった場合は1rem、
2remより大きくなった場合は remの値をとります。
このようにすると、ブラウザの幅が変わっても、
1rem 〜 2remの範囲に収めることが可能になります。
Clamp()のメリット
この仕組みをつかうと、clamp()関数を使うことで、メディアクエリを使わずに、滑らかに変化するコードを１行で表すことも可能になります！
今までメディアクエリで書くと
h3 {
font-size: 1rem;
}
@media (min-width: 400px) {
h3 {
font-size: calc(0.5rem + 2vw); /*可変サイズ */
}
}
@media (min-width: 1000px) {
h3 {
font-size: 2rem;
}
}
といった書き方だったのが、
h3 {
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}
というように、すっきりと見やすくすることができます。
Clamp()と、min()やmax()との違い
Clamp()は、min()やmax()とは以下のような違いがあります。
min() | max() | clamp() | |
|---|---|---|---|
意味 | ()内の最小値を採用 | ()内の最大値を採用 | 推奨値が範囲外なら、最小値 or 最大値を採用(つまり限度を設定） |
例 | width: min(100%, 500px); | width: max(50%, 300px); | font-size: clamp(1rem, 1rem + 2vw, 3rem): |
100%が500pxより小さい場合、100%を適応 | 50%が300pxより大きい場合は50%を適応 | 理想は1rem + 2vwを取りつつ、1rem～3remの値になる |
Fluid Typographyとclamp()
Fluid Typography(フルイド・タイポグラフィ)とは、
画面幅やビューポートの幅に応じて、
いきなり大きく切り替わるのではなく
滑らかにフォントサイズを変化させていく方法です。
レスポンシブデザインの一環として使うことができ、見た目の一貫性を保ちやすくなります。
そんなFluid Typographyを、clamp()を使って設定していきます。
Fluid Typographyを設定する
たとえばclamp()の書き方として、
font-size: clamp(1rem, 2vw, 2rem);
font-size: clamp(1rem, 2vw + 1rem, 2rem);
上記のような、2つの推奨値の書き方があったとします。
- 前者の2vw(ビューポート幅2%)は、画面幅のみに依存するので、スマホだと極小になる可能性がある
- 後者の 2vw + 1rem は、画面幅で変化はしつつ、最低でも1rem以上となるので、安定して可読性は担保される
といえます。
このように、「2vw + 1rem」のような推奨値の計算式を出すことで、
最小値〜最大値の間を滑らかに変化する
FluidTypographyの作成が可能になります。
Fluid Typographyのお役立ちサイト
clamp()の推奨値の計算式は、自分で計算する以外にも、ジェネレータを使って、サイト上で計算することも可能です。
(こちらの方が簡単！)
シンプルなサイトとしては、 Min-Max-Value Interpolationが使いやすい印象です。
min-max-calculator.9elements.comあらかじめ下記の要素を用意しておくと、推奨値も含めてclamp()の式を出してくれます。
- SP、PCの画面幅設定
- 上記幅の際のベースフォントサイズ
他、下記サイトでは、タイプスケール比(ベースフォントから、見出し等サイズを決めるための一定の比率)なども入力してclamp()の式をつくることが可能です。
Fluid Typographyを自分で計算する方法
幅に連動してフォントサイズを大きくしてゆく推奨値は、
以下の式で出すことができます。
preferred = min-size + ((max-size - min-size) / (max-width - min-width)) * (current-width - min-width) /* current-width:現在のビューポート幅*/
| min-size | 最小幅の際のフォントサイズ |
| max-size | 最大幅の際のフォントサイズ |
| ((max-size – min-size) / (max-width – min-width)) | フォントサイズが、幅に応じてどれだけ変化するか?の比率 |
| (current-width – min-width) | 最小幅〜現在の幅までの差 |
実際に数字を入れてみます。例えば、下記の数値で推奨値を計算してみます。
| 最小フォントサイズ（min-size） | 16px |
| 最大フォントサイズ（max-size） | 24px |
| 最小幅（min-width） | 375px |
| 最大幅（max-width) | 1280px |
さきほどの式にあてはめると、現在のビューポート幅（current-width） = 800px のときに、
16 + ((24 – 16)/ (1280 – 375) * (800 – 375)) ≒ 16+ 3.74 ≒ 19.74pxとなります。
Fluid Typographyを相対的な単位に変換する
次に、先ほどの推奨値の式、
preferred = min-size + ((max-size - min-size) / (max-width - min-width)) * (current-width - min-width)
を、remやvwといった、相対的な単位を用いてシンプルにしたいと思います。
1: vwを使う
vwの単位の意味として、
- 1vw = ビューポート全体幅の１%
- 100vw = ビューポート全体幅（= pxに変換される）
となるため、さきほど数値を代入した式は、vwを使うと、
current-width=100vwなので、
preferred = min-size + ((max-size - min-size) / (max-width - min-width)) * (100vw - min-width)
となり、
font-size = 16px + 8px * ((100vw – 375px) / 905px) になります。
計算すると、
推奨値は
16px + (8px * 100vw / 905px) – (8px * 375px / 905px)
= 16px + 0.883978vw – 3.31381px = 12.68619px + 0.883978vw となります。
2: remを使う
さらに
- 1rem = 16px
で計算し、12.68619px をremに換算すると、近似値から
推奨値は0.793rem + 0.884vwになります。
最小値、推奨値、最大値すべてをclamp()要素にまとめてと、
font-size : clamp( 1rem, 0.793rem + 0.884vw, 1.5rem )
で表すことができます。
Clamp()関数と、フォントサイズの設定方法 まとめ
以上、clamp関数をつかって、
レスポンシブにするためのFluidTypographyの作り方をご紹介しました。
自力やサイトをつかってFluidTypographyをつくる以外の方法として、
scssで計算式を用意して、数値を入れるだけにする方法もあるので、
今度はそちらについても書いていきたいと思います。
最後までご覧いただき、ありがとうございました！
