今回はスタイルシート（CSS）を利用してフォントサイズの最小値と最大値を指定し、ウィンドウサイズに合わせて自動で文字の大きさが変更される方法の紹介となっております。
私も比較的多く使っているCSSとなり、ウィンドウサイズに合わせて文字サイズが変化するのでかなりオススメです。
ソースコード
@media (min-width: 768px) {
:root {
font-size: calc(1rem + ((1vw - 7.68px) * 0.6944));
min-height: 0vw;
}
}
@media (min-width: 1920px) {
:root {
font-size: 24px;
}
}レスポンシブデザインのためのフォントサイズ設定を行っています。異なるビューポート幅に応じて、フォントサイズが動的に調整されるようになっています。以下、このコードの各部分について詳しく説明します。
1. メディアクエリと:root
| @media (min-width: 768px) { … } | ビューポートの幅が768px以上の場合に適用されます。 |
|---|---|
| @media (min-width: 1920px) { … } | ビューポートの幅が1920px以上の場合に適用されます。 |
| :root | CSSカスケーディングで最上位の要素を指し、通常は<html>要素に相当します。この中で定義されたスタイルは、全体のデフォルト値として使われます。 |
| calc() | calc() 関数は、CSSで計算を行うために使用されます。この場合、フォントサイズを動的に計算するために使用されています。 |
h2やh3といった特定のセレクタ（id、classなど）に設定したい場合は下記の様に:root部分を変更してください。
@media (min-width: 768px) {
h2,.hogehoge { //セレクター名に変更
font-size: calc(1rem + ((1vw - 7.68px) * 0.3472));
min-height: 0vw;
}
}
@media (min-width: 1920px) {
h2,.hogehoge { //セレクター名に変更
font-size: 20px;
}
}この場合、h2とhogehogeのクラスのみに対応されます。
フォントサイズの計算
min-width: 768px の場合
:root {
font-size: calc(1rem + ((1vw - 7.68px) * 0.6944));
min-height: 0vw;
}font-size: calc(1rem + ((1vw - 7.68px) * 0.6944))で、フォントサイズが動的に計算されます。
1remは通常のルートフォントサイズ（例えば16px）。1vwはビューポートの幅の1%。(1vw - 7.68px)はビューポート幅から固定値（7.68px）を引いたもの。((1vw - 7.68px) * 0.6944)はこの値に0.6944を乗じたもの。
この計算式により、ビューポートが768px以上のときにフォントサイズが徐々に大きくなるように調整されています。
min-height: 0vwで、このプロパティは特に意味がないように見えますが、恐らく意図的なものではないかもしれません。
min-width: 1920px の場合
:root {
font-size: 24px;
}ビューポートの幅が1920px以上の場合、フォントサイズは固定で24pxになります。
サンプル
その他
このソースコードはあくまで一例となってます。
文字の最小値、最大値を決める方法は他にももちろんございます。
:root {
font-size: clamp(16px, calc(1rem + ((1vw - 7.68px) * 2.9514)), 50px);
}ここではclamp関数を使って、フォントサイズが特定の範囲内で動的に変化するように指定しています。
この場合、簡単に説明しますと16pxが最小サイズとなり、50pxが最大サイズとなり、ブラウザのビューポート幅によって文字サイズが大きくなったり小さくなったりするようなっています。
先に紹介したコードとほぼ同じ結果にはなりますが、こちらも環境に合わせてこちらのコードを利用するのも良いでしょう。
サンプル
オンラインツール
文字サイズをビューポート幅に合わせて変更させるには計算式が必要となりますが、これがとても面倒です。それぞれの環境やセレクタに合わせて計算すると大変な作業となります。
そんなときに利用したいのが下記のオンラインツールです。
こちらのオンラインツールを利用すると面倒な計算式を自動で行ってくれます。
CSSをコピーすることもテストする環境も用意されているので、計算が面倒とお困りの方はぜひご活用してみてください！
注意点
こちらのCSSは全ブラウザに対応していわけではございません。
が、ほとんどのブラウザには対応して安心してください。
どういうことかと良いますと、古いブラウザには対応されていないということです。
例をあげるとInternet Explorerの6〜8とかですね。
https://caniuse.com/?search=calc
まとめ
このコードは、レスポンシブデザインのためにビューポートの幅に応じてフォントサイズを動的に調整するためのものです。768px以上のビューポートでは計算式を使ってフォントサイズを徐々に大きくし、1920px以上になるとフォントサイズを24pxに固定します。このようにして、さまざまなデバイスで一貫したユーザー体験を提供します。
今回紹介したコードはあくまで参考値となっております。
ご自分の環境に合わせてコードを編集する必要がございますのでご注意ください。
参考サイト
今回の記事は下記のサイト様を参考にさせて頂いております。
初回したオンラインツール以外にもpx→vw変換ツールを紹介しておりますのでご興味がある方はぜひ！
