ビューポートの幅に対しての大きさを指定できる「vw」を用いてフォントサイズをレスポンシブに変化させつつ、最大値・最小値も同時に指定する方法を出来るだけ分かりやすく解説します。
メディアクエリを使えば、文字サイズを14px→18px→24pxのように段階的に変化させるのは簡単です。ただ解像度ごとにfont-sizeを指定するだけですからね。
では、画面のサイズに応じてスムースに文字サイズを変化させるにはどうすればいいでしょうか？はい、vwを使いましょう。
目次
「vw」の仕組み自体は超簡単です。
画面（ビューポート）の幅に対しての割合。100vwを基準として指定する。
例えば横幅1280pxの環境で表示されている場合は…
100vw = 1280px
50vw = 640px
3vw = 38.4px
このように、画面の横幅を基準とした数値を指定できるので、レスポンシブなWebサイトを制作する際に重宝します。ちなみに「vh」という単位を使えば画面の高さに応じた数値も指定可能です。全画面表示のメインビジュアルとかでよく使いますね。
そしてこの「vw」という単位はfont-sizeの値でも使うことが出来るので、上手く使えば文字サイズを動的に変化させることが可能です。
まずはfont-sizeに3vwを指定しただけの表示結果です。あ、画面の幅を変えて見たいなら右上の「CodePen」から見てね。
See the Pen RmWzxM by Kuzlog (@Kuzlog) on CodePen.28426
ブラウザのサイズをぐりぐり変えると、文字サイズが滑らかに変化しているのが分かるかと思います。
しかしこのままだと、スマートフォンのような小さな画面だと文字が小さすぎるし、4Kモニターのような高解像度環境だと文字が大きくなりすぎる…という使い物にならない状態です。
この問題を解決するには、文字サイズの最小値と最大値を指定する必要があります。
以下の条件を満たすことの出来る指定方法を考えてみましょう。
これらの条件を満たすfont-sizeの指定方法がこちらです。
See the Pen GaqBev by Kuzlog (@Kuzlog) on CodePen.28426
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div{ margin: 16px 0; text-align: center; font-size: 16px; //最小値 } @media (min-width: 640px) { div{ font-size: calc(16px + ((1vw - 6.4px)*3.571)); } } @media (min-width: 1200px) { div{ font-size: 36px; //最大値 } } |
記述が急激にややこしくなりましたが、一つ一つ確認してみましょう。
4行目のfont-size: 16px;が適用されます。
13行目のfont-size: 36px;が適用されます。
難しいのがこの部分です。
font-size: calc(16px + ((1vw – 6.4px)*3.571));
CSS内で計算をすることができるcalc()を使うことになります。
ややこしい数値を文字で置き換えて、それぞれの求め方を見てみましょう。
font-size: calc(X + ((1vw – Y)*Z));
ここには文字サイズに指定したい最小値を入れます。今回は16pxですね。
最小値を適用したい横幅の1%です。今回は640px未満の環境から文字サイズを固定したいので、100/640=6.4pxです。
こうすることで1vw-6.4px=0となり、先程のXに入れた値が文字サイズの最小値となります。
これが一番分かりにくいですね。
ここに入れる値の計算式は…
（最大値を適用したい横幅の1% – 最小値を適用したい横幅の1%）× ◯ = 文字サイズの最大値と最小値の差
となります。今回の例で言うと…
（12 – 6.4）× ◯ = 20
になります。これを整理して…
20 / 5.6 = 3.571428…
こうなるので、適当に丸めて、Zに入れる値は3.571になります。
あ、もちろんこういう書き方でもいいですよ↓
font-size: calc(16px + ((1vw – 6.4px)*(20/5.6)));
僕は計算できる数値は予め計算しておきたい派なので使いませんが、そこらへんは各自お好みでどうぞ。
おしまい。
