Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2019/05/12 2019/05/12 Web制作

フォントサイズを「vw」でレスポンシブに変化させつつ、最大値・最小値を指定する方法

ビューポートの幅に対しての大きさを指定できる「vw」を用いてフォントサイズをレスポンシブに変化させつつ、最大値・最小値も同時に指定する方法を出来るだけ分かりやすく解説します。

メディアクエリを使えば、文字サイズを14px→18px→24pxのように段階的に変化させるのは簡単です。ただ解像度ごとにfont-sizeを指定するだけですからね。

では、画面のサイズに応じてスムースに文字サイズを変化させるにはどうすればいいでしょうか?はい、vwを使いましょう。

そもそも「vw」って何?って人用の解説

「vw」の仕組み自体は超簡単です。

vwとは?

画面(ビューポート)の幅に対しての割合。100vwを基準として指定する。

例えば横幅1280pxの環境で表示されている場合は…

100vw = 1280px
50vw = 640px
3vw = 38.4px

このように、画面サイズに応じて動的に横幅を指定できるので、レスポンシブなWebサイトを制作する際に重宝します。スマホ用サイトでよく使われているかな?

そしてこれを上手く使えば、文字サイズを動的に変化させることも可能です。

font-sizeにvwを指定してみる

まずはfont-size3vwを指定しただけの表示結果です。あ、画面の幅を変えて見たいなら右上の「CodePen」から見てね。

See the Pen RmWzxM by Kuzlog (@Kuzlog) on CodePen.28426

ブラウザのサイズをぐりぐり変えると、文字サイズが動的に変化しているのが分かるかと思います。

しかしこのままだと、スマートフォンのような小さな画面だと文字が小さすぎる&4Kモニターのような高解像度環境だと文字が大きくなりすぎるという、正直使い物にならない状態です。

最大値・最小値を指定してみる

以下の条件を満たすことの出来る指定方法を考えてみましょう。

  • 横幅640px未満の環境では文字サイズを16pxに固定
  • 横幅1200px以上の環境では文字サイズを36pxに固定
  • 640~1200pxの間は文字サイズを滑らかに変化させる

それがこちらです。

See the Pen GaqBev by Kuzlog (@Kuzlog) on CodePen.28426

これで先程の条件を全て満たすことができました。
記述は急激にややこしくなりましたが、一つ一つ確認してみましょう。

横幅640px未満の環境だと

4行目のfont-size: 16px;が適用されます。

横幅1200px以上の環境だと

13行目のfont-size: 36px;が適用されます。

横幅640~1199pxの環境だと

難しいのがこの部分です。

font-size: calc(16px + ((1vw – 6.4px)*3.571));

CSS内で計算をすることができるcalc()を使うことになります。
ややこしい数値を文字で置き換えて、それぞれの求め方を見てみましょう。

font-size: calc(X + ((1vw – Y)*Z));

X

ここには文字サイズに指定したい最小値を入れます。今回は16pxですね。

Y

最小値を適用したい横幅の1%です。今回は640px未満の環境から文字サイズを固定したいので、100/640=6.4pxです。

こうすることで1vw-6.4px=0となり、先程のXに入れた値が文字サイズの最小値となります。

Z

これが一番分かりにくいですね。
ここに入れる値の計算式は…

(最大値を適用したい横幅の1% – 最小値を適用したい横幅の1%)× ◯ = 文字サイズの最大値と最小値の差

となります。今回の例で言うと…

(12 – 6.4)× ◯ = 20

になります。これを整理して…

20 / 5.6 = 3.571428…

こうなるので、適当に丸めて、Zに入れる値は3.571になります。

あ、もちろんこういう書き方でもいいですよ↓

font-size: calc(16px + ((1vw – 6.4px)*(20/5.6)));

僕は計算できる数値は予め計算しておきたい派なので使いませんが、そこらへんは各自お好みでどうぞ。