【絶対使え】clamp() – 文字サイズ調整の超便利CSS

こんばんは。

今回はスモールライトが壊れるレベルの備忘録です。

 

早速ですが皆さん、CSSのclamp()を積極的に使いましょう。

なぜなら超便利だからです。

 

 

文字サイズ調整に必須な「clamp()」

画面幅に合わせて文字サイズを調整したい時ってありますよね？（圧）

そんな時に大活躍するのがCSSの単位「vw（viewport width）」です。

 

.text {
  font-size: 5vw;
}

 

のように指定することで、文字サイズをええ感じに伸縮してくれるのですが、

「スマホだと小さくなりすぎるから固定値にしたい」

「タブレット以上のサイズは解像度がバラバラだから固定値にしたい」

というようなことがよくあります。

 

その場合、

 

.text {
  font-size: 40px;
}
@media screen and (max-width: 1024px){
  .text {
    font-size: 5vw;
  }
}
@media screen and (max-width: 600px){
  .text {
    font-size: 16px;
  }
}

 

みたいな書き方をしなければなりません。

これがなんと、

 

.text {
  font-size: clamp(16px, 5vw, 40px);
}

 

だけで済みます。

やってることは厳密には同じではないのですが、要するに

「文字サイズは5vwだよ、ただし最大で40px、最小で16pxね」

という具合に、文字サイズの最大値・最小値を同時に指定できるのです。

 

これによってvwを使う際の「文字大きくなりすぎ問題・小さくなりすぎ問題」を回避できるということですな。

スネ夫「悪いなのび太。この文字は40pxまでなんだ」

 

 

結論：clamp()は素晴らしい

実際に組む時はvwの箇所も各ブレイクポイントで微調整が必要になる場合もあるのですが、最大値・最小値が指定できるだけでものすごくコーディングが楽になります。

 

本当に便利。

ありがとう心の友よ。