お久しぶりです。ここ2,3年でメガネをかけ始めたのに「メガネかけてないとめっちゃブスだよね」って言われたことのある小木さんです。メガネの話はさておき、今回はvwというすげーフォントサイズの指定の方法（vwはフォント以外にもサイズの指定をすることができます。）について話をしていきたいと思います。
vwとは
vw・・・viewport width。ビューポートの幅に対する割合です。https://skygold.jp/web/2901.html
まずvwってなんやねん。って方のために説明します。
vwはサイズの指定方法の一つでフォントサイズの指定にも応用できる優れものです。またフォントサイズの単位としては他にpx, em, rem, %などがあります。vwは表示されている画面の幅を100vwとします。例えばある要素を10vwとしたらその要素は画面幅の1/10のサイズということになります。%指定では親要素の大きさが基準になっていたのですが、このvwは画面の幅ですので%とは少し違います。そこでここ最近人気急上昇中（たぶん）であるvwについてもう少し詳しく話していきたいなという次第です。
vwの例
画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、14px÷320px=0.04375(4.375%)なので「4.375vw」と記述します。pxなどの固定値でコーディングを行うと640pxのときはデザインに対して文字が小さすぎるが320pxのときはぴったりということが起こりレスポンシブにうまく対応できていませんでした。そこで％やrem, emなどを駆使することで何とかレスポンシブ対応してきましたがそこをvwを使うとさらに簡単にレスポンシブ対応することができるというわけです。
html {
font-size:16px;
}
h1 {
font-size: 4.375vw;
}
pxの場合数値が固定ですので横幅が可変したときにpsdなどのデザインカンプと違う改位置などになってしまうことが起きていました。ここでvwの出番です。vwであれば画面のサイズによってフォントの大きさが可変するので、画面が可変するたびフォントの大きさが変わります。これはユーザーにとっては読みやすく、デザイナーにとって夢のような表示になってくれることでしょう。
でも。。。
わかっていますよ。
「いちいち”14px÷320px=0.04375(4.375%)”こんな計算してる暇ないよ。」
「こんな導入するハードル高かったら今まで通り％でやるよ。」
そこでremを使ってvwの設定をもっと簡単にして、「これなら実装してみて使えるかどうか確かめてみよう！」っていう気になるまで持っていきたいと思います！
remを使ってわかりやすくします
html {
font-size: calc(100vw/32.0);
//これは横幅が320pxのときにフォントサイズを10pxにするように計算するコードです。
}
h1 {
font-size: 1.6rem;
//横幅が320pxのときに16px、横幅が640pxのときに32pxとなります。
}
まずhtmlのフォントサイズをcalcという計算を行ってくれるものを使います。画面の横幅が320pxのときにフォントサイズを10pxにしてくれるように設定します。すると例えば横幅が320pxのときにhtmlのフォントサイズは10pxなのです。h1は1.6remなので10 x 1.6 = 16pxということになります。
このvwとcalcを使えば画面幅が変わるごとに計算しなおしてくれるので画面幅を変えてもフォントの大きさが画面幅によって変わるので改行の位置は変わらずにデザインを保ってくれます。
以下480px、640pxにしたときのキャプチャです。480pxは320pxの1.5倍なのでフォントサイズも1.5倍の24pxになります。また640pxのときには32pxとなります。
vwのメリット・デメリット
メリット
- 横幅によってフォントサイズが変わるので改行の位置が変わらない。
- デザイン通りの実装ができる。
- 意外と導入しやすい。
デメリット
- 計算とかしなきゃいけない。
- 640px以上になったらpx指定しないとずっと大きくなっていってしまう。
- vwってなんか難しそうっていう先入観がある。
などなどがあります。デメリットの2つ目で書かせていただいたのですが、640px以上だとフォントを固定させたいという願いがあると思います。しかし横幅に合わせてフォントサイズが大きくなるので上記の例を使うと、1280pxのときに64pxになってします。めちゃめちゃでかいですね。なので下記のように書くと良いでしょう。
html {
font-size: calc(100vw/32.0);
//これは横幅が320pxのときにフォントサイズを10pxにするように計算するコードです。
}
h1 {
font-size: 1.6rem;
//横幅が320pxのときに16px、横幅が640pxのときに32pxとなります。
}
@media screen and (min-width: 640px) {
h1 {
font-size:32px;
//640px以上のときは32pxで固定になります。
}
}
上記でremを使ってわかりやすくしましたがここでmixinを使ってvwを使いやすくします。
//mixin.scss
@mixin font($value) {
font-size: $value * 2 + px;
//pcサイズのときは$valueの2倍の大きさ。今回であれば32px
@media screen and (max-width: 640px) {
font-size: $value / 10 + rem;
//640px以下は$value割る10で1.6。1.6+remで1.6rem。
}
}
@import 'mixin.scss';
html {
font-size: calc(100vw/32.0);
}
h1 {
@include font(16);
}
上記のように@include font(16);と記述するだけで640px以下と640px以上の2つのフォントサイズを指定してくれます。しかし！！これが使えるのはspのフォントサイズがpcのフォントサイズのきっかり倍のときしか使えません！ので微妙に数値が違う場合はmixinを使用せずに640以上をメディアクエリで指定する必要があるので気をつけてください。
まとめ
いかがでしたでしょうか。画面幅に応じてフォントが可変してくれるなんて夢のようじゃありませんか。皆さんもぜひ一度試してみてください。
参考
フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる
