ビューポートの幅に合わせてフォントサイズが可変する「vw,vh」が便利！

こんにちは。
ジーニアスウェブのスギタです。

私は暑い夏がとても苦手なのですが、この時期の夜釣りは心地良くて好きです。
先日の夏休みには、小さいサイズですが太刀魚を少々釣って帰りました。
小さいサイズなので捌くのが少し大変だったのですが、有りがたく美味しく頂きました。
これからどんどん釣れる時期に突入なので、また行けるように仕事がんばります！

さて本題に入りまして、
皆さんはレスポンシブサイトをコーディングする際、フォントサイズはどのように指定されていますか？
基本はメディアクエリを使用し、ブレイクポイントごとにpxやremなどのサイズを変更する方法かと思います。

しかし、ブレイクポイントごとにわざわざサイズ変更するのって大変なときありませんか？
そんな時にとても便利な、vwやvhについてご紹介させていただきます。

vwやvhは、画面いっぱいに画像を出したいときなどによく使われていますが、フォントサイズへの指定も可能です。
この単位を使用すると、ビューポートの幅によってフォントサイズが可変してくれます。
ブレイクポイントごとの細かいCSS調整が不要になりますので、CSSの記述を減らすことが出来て効率的です。

ビューポートの単位（Viewport units）とその仕様

ビューポートの単位には、vw,vh以外にもvminやvmaxがあります。
それぞれの仕様は下記の通りです。

※vw/vhは現在の主要ブラウザではほぼ対応しているようですが、vmin/vmaxはまだ対応していないものもあります。ご注意ください。
各ブラウザのサポート状況はこちら（参考：Can I Use…）

ビューポートの単位の記述

CSSへの記述はとても簡単です。

例えば、ビューポート幅 375px の時に、フォントサイズ 15px で表示させたい場合

15px ÷ 375px × 100(%) = 4

となりますので4vwと記述します。

h1 { font-size: 4vw }

ただし、上記のvwの値をPCとスマホで同じ指定にしてしまいますと、どちらかが大きい（もしくは小さい）サイズになってしまうこともあります。
例えば、1000pxのビューポート幅の4vwの場合、フォントサイズが40pxになります。
デザイン的に問題がないようであれば、そのまま使えると思います。
意図したサイズにならない場合は、ブレイクポイントごとに適宜、値を変えてあげると良さそうです。

私が実際にvwを使用してみて良いなと思ったところは、
PCではキレイな改行位置ですが、画面が小さくなるにつれて改行位置が気持ち悪くなる…
といったことが、ほぼ解消されるところです。

さいごに

今回は、レスポンシブサイト制作時にとても便利なビューポートの単位についてご紹介させていただきました。
時と場合によって、使い分けが出来るよう引き出しを持っておくと、制作者さんはとても効率的になるのではないでしょうか。

それでは、また。