レスポンシブ対応のサイト制作で、しばしば厄介になるのがフォントサイズの指定です。
案件によっては多数のmediaクエリがあったりして、それらの全てのフォントサイズを都度変えるとなると中々面倒なものがあります。今回は、vwを使ったフォントの指定方法をご紹介します。
このページのコンテンツ
フォントサイズの単位
px（絶対値）
どんな状況でもサイズが変わらない絶対値です。
%（相対値）
親要素を基準として相対値になる単位です。
em（親要素のフォントサイズを基準とした相対値）
親要素のフォントサイズを起点とした指定方法です。
例えば、親要素のフォントサイズが10pxだとして、子要素を1emとすると親要素と同じ10pxになります。子要素を2emとすると倍の20pxになります。
rem（ルートのフォントサイズを基準とした相対値）
ルート（html）のフォントサイズを基準にした相対値の指定方法です。レスポンシブ対応時によく使う方法です。
例えば、html要素にfont-size: 62.5%;とすると、px指定時の10pxに相当します。つまり、1remとすると10pxと同じフォントサイズになります。1.5remとすれば15pxと同じサイズです。
vw・vh（ビューポートを基準にした指定）
ビューポートとはWEBサイトの表示領域（ブラウザのサイズ）のことです。
つまり表示領域に応じてサイズを算出します。今回はこのvwを使ったフォントサイズの可変方法についてご紹介します。
vwによるフォントサイズの可変方法
ここから本題です。
先にご説明しますと、Sassを使った方が現実的です。なぜならビューポート毎に表示したいフォントサイズを都度、vwに変換しなければなりません。その計算が非常に面倒なので、Sassが使えればmixinで自動的にvwを計算させることができます。
なお、ここではSassによるmixinではなく、アナログで計算する方法をご紹介します。
とは言っても、特に難しい事や変わった事をする訳ではなく、上記で説明している通り、ビューポート毎に表示させたいpx値でのフォントサイズを、vwに変換するだけです。計算式は以下の通り。
100 / 基準値 x px = vw
「基準値」にはビューポートサイズ（例えばデバイス毎の画面サイズなど）を指定します。
例えば、基準値であるデザインの幅が1200pxの時に、フォントサイズを14pxで表示させたい場合の計算式は以下の通り。
100 / 1200 * 14 = 1.16666667vw
となります。
いちいち計算が面倒な場合はオンラインツール
上記の通り、vwに変換したい部分を適宜計算して変換していく必要があります。
複雑な計算ではないので、電卓さえあれば誰でも計算できますが、オンラインツールで計算を自動でしてくれるサイトがいくつかありますのでご紹介します。
まとめ
注意点そしては、vwでフォントサイズを指定したとしても、確実に想定通りのサイズで可変する訳でありません。特にPCは様々なビューポートサイズ（モニターサイズやブラウザのウィンドウサイズ）が想定されるので、ブレイクポイントによる細かな指定は避けられません。
以上、フォントサイズをpxからvwに変換する方法のご紹介でした。
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
