前回 【レスポンシブデザイン】解像度によって表示を切り替える - で @media （メディアの表示幅や高さ、解像度などを指定する）と display:none （要素を非表示にする）を組み合わせて表示を切り替える勉強をしたのですが、今回は画面の表示幅に応じてフォントのサイズを変える事に挑戦しました。
前回のように @media を使用してフォントサイズを指定しても良かったのですが、もっと簡単にできる方法は無いか調べてみました。
vw（Viewport Width）を使ってフォントサイズを可変させる
vw（Viewport Width）は css で使われる単位の一つですが、ビューポートの幅に応じてサイズを変えることができます。
参考：CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO (classmethod.jp)
例として以下のようなcssを適用させてみました
使用するcss
/*ビューポートの幅に対して2%のサイズを指定する*/
.test01 {
font-size: 2vw;
}ブラウザの表示幅を変えると文字サイズが変化します↓
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ちなみに1vwは1%に相当するので 2vw に指定した場合、文字サイズは、ビューポート幅1800pxで36px、幅800pxで16px、幅400pxで8pxになります。
参考：固定値から割合に変換する計算 (coding-calc.com)
@mediaを使った切り替えと違って、スムーズに文字サイズが可変するのは便利なのですが、表示幅によって意図しない大きさになってしまうため使い道が難しくなってしまいました。
表示サイズに下限と上限をつける
対応策として、clamp()関数と vw を使用して最小と最大の文字サイズを指定してみました。
clamp(最小値、推奨値、最大値)
参考：clamp() - CSS: カスケーディングスタイルシート | MDN (mozilla.org)
使用するcss
/*clamp(最小値、推奨値、最大値)*/
.test02 {
font-size: clamp(12px, 2vw, 24px);
} 吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
これにより
- ビューポート幅 600px以下→ でフォントサイズ 12px
- ビューポート幅 1200px以上→ でフォントサイズ 24px
最小（12px)～最大（24px）の間で可変するようになりました。
@media でブレイクポイントを設定した方が良い場合もあるかもしれませんが、想定の範囲内でフォントサイズが変化するのも面白いかもしれません？
CSSのあて方
全体にCSSをかけてしまうと意図しないところに影響を受けてしまうかもしれないので、ブロック毎に「高度な設定 → 追加 CSS クラス」を使う方が良いかもしれません。（クラシックエディターの場合はコードにdivタグを使用します）
- CSSを「カスタマイズ → 追加 CSS」に記述します。
- ブロックエディターの場合は上記CSSのクラス名を反映させたいブロックの「高度な設定 → 追加 CSS クラス」に（.を除いて）記入します。
ブロックエディター：グループを使ってcssを反映させる方法。 - イージーライフ日記 (easy-life.work)
まとめ
@mediaを使って切り替えなくても簡単に（1行で）表示サイズを変えることができるのは便利です。
ただ、使いどころがあるかは？？？ですけど？
備忘録でした
