ひとり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() を使って最小サイズと最大サイズを設定した。