WEB制作において、CSS設計はとても大切です。
簡単にはじめられるCSSなので出来る人は多いと思いますが、その深さはマリアナ海溝よりも深いとされています。（今勝手にいいました）
中でもフォントサイズについては設計がとても難しく、メディアクエリだけではうまく対処できないのが難点です。
そこで登場するのが、clamp(*,*,*)というもの。
以下のように記述します。
h1 {
font-size: 2em;
font-size: clamp(1.4em, 4vw, 2em);
}clampのカッコ内の引数（数値）を順番に見ると
- 第1引数の1.4emが最小の値
- 第2引数の4vwが平均の値
- 第3引数の2emが最大の値
となります。
問題となるのは第2引数の中央の値。この算出が意外と難しい。そこで以下のような計算で、算出することにする。
16
基準のフォントサイズ（サイトのデフォルトで設定されているフォントサイズ）
2
上のclampで設定した最大のサイズ（第3引数）
800
基準とする画面幅。この場合、800px以上の画面幅の場合は2emとなり、それ以下の場合画面幅に合わせて、1.4emを下限として段階的に縮小されていく
100
800pxの画面幅をvwと同じ単位にするために割っているだけ
(16×2)÷(800÷100) = 4
実際に画面で確認してみるとこんな感じだ。イイカンジダ。
これまでもメディアクエリを使えばこういった見た目にすることは可能ではあったが、コードも長くなるし結構面倒だった。
この1行で済むのだから便利になったものだ。
ちなみに、冒頭でfont-size: 2em;としているのは、clamp()が使えない古いブラウザ対応であり、不要ならば消してしまってもいいと思う。
対応ブラウザはcan i useで要確認。
SPONSORLINK
