どうも！かけちまるです！
webサイトを構築するにあたってレスポンシブ対応は必須になっています。
そのレスポンシブ対応で困ってしまう1つがフォントサイズだと思います。
でも、デザインカンプに合わせてコーディングしたとしても少しブラウザのサイズを変えればレイアウトが微妙になってしまう…
フォントサイズを可変にできる便利な方法があればと思ったらcssでclamp関数というのが便利だったのでご紹介していきたいと思います。
この記事では、
がわかります。
CSSコピーfont-size: clamp(最小値, 推奨値, 最大値);
フォントサイズの可変はpxではなくvwを単位にすることが多いと思いますがどこまでも小さくなったり大きくなったりします。clamp関数を使うと最小値と最大値を決めることができます。min-widthとかmax-widthみたいな感じですね。
CSSコピーfont-size: clamp(16px, 2.9vw, 32px);
上記の例だと、16pxから32pxの間で可変になってくれます。
実装サンプル
便利なclamp関数ですがIEのみサポートされていないようです。
| IE | Edge | Firefox | Chrome | Safari | iOS | Android | |
|---|---|---|---|---|---|---|---|
| バージョン | × | 79~ | 75~ | 79~ | 13.1~ | 13.4~ | 94~ |
記事が古かったらこちらから最新状況が見れます。
IEではサポートされていないので実際clamp関数を使うときは以下のようにする必要がありそうです。
CSSコピーfont-size: 32px; /* IE対策 */ font-size: clamp(16px, 2.9vw, 32px);
このようにすればIE以外は可変になり、IEでは32pxで表示されるようになります。
どうしてもIEでフォントサイズを可変にしたい場合はcssのcalc関数を使うと実現できます。
calc関数を使う方法では、例えば画面幅500px~1100pxの間でフォントサイズ16px~32pxで可変にするということができます。
しかし、calc関数を使う方法は注意が必要でどこまでも画面幅に応じてフォントサイズが大きくなったり小さくなったりしてしまうということです。
やり方としては公式に当てはめて設定します。
少しめんどくさいですがこれでIEにも対応できます。
CSSコピー/* 公式 */ font-size: calc(A + B * (100vw - C) / D);
例えば、画面幅500pxから1100pxの間をフォントサイズ16pxから32pxで可変にしたい場合は以下のようになります。
CSSコピーfont-size: calc(16px + 16 * (100vw - 500px) / 600);
実装サンプル
Safariはclamp関数をサポートしているにも関わらずうまく計算してくれないようです。
※2022年1月23日現在
そんな時は次のCSSを追加してみてください。
CSSコピー*{ min-height: 0vw; /* Safari clamp関数対策 */ }
なぜmin-heightを0vwにすると解決するのかは不明なのでわかる方がいればTwitterかお問い合わせフォームからご教授いただけると助かります。
おわり
フィードバックを送信
記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。
