書体サイズをウインドウに合わせる

ひとりCSS Advent Calendar 2022 17日目です。

clamp() を使いつつ、書体サイズをウインドウに合わせるをやってみます。

Codepenのサンプル

See the Pen css variables by Beco (@becolomochi) on CodePen.

コードについて

HTML

p タグで囲んだテキストを用意しました。

<p>Merry Christmas🎄</p>

CSS

使うところだけ抜き出しました。

p {
  font-size: clamp(2rem, 10vw, 6rem);
}

• clamp() の中身は、最小値、基本のサイズ、最大値の順に書く。
• 基本のサイズには vw （ビューポート幅の1%） の単位で指定することでウインドウ幅に合わせられる。
• このままだと大きすぎたり小さすぎたりしてしまうので、clamp() を使って最小サイズと最大サイズを設定した。