vw単位を使ってフォントサイズを指定

一般的にWebサイトでフォントサイズを指定する際には、px、em、％など様々な単位を使って文字サイズを決定していきます。その中でも今回は、vwという単位を使用してフォントサイズを指定する方法を紹介します。

vwを使うメリット

vwとは、「Viewport Width」の略で、簡単に言うとPCやスマホなど各端末の幅を指します。このvwを使って文字サイズを指定するメリットとしては、例えば、パーセントでサイズを指定した場合は親要素を基準にして割合が決まるので、親要素の横幅サイズの影響を受けてしまいます。一方で、vwを使ってサイズを指定した場合はブラウザの横幅に対する割合で計算されるので、閲覧者が使っている端末のサイズに合わせて自動的にフォントサイズを調整してくれます。

vwの指定方法

実際にvwを使ってサイズを指定する場合は、以下のような計算で数値を出します。

表示させたい文字サイズ÷幅×100

例えば、幅が1000pxで表示させたい文字サイズが16pxの場合は、「16÷1000×100＝1.6」となるので、1.6vwと指定することができます。

このように、vwは端末の横幅によってフォントサイズが調整されるので、レスポンシブWebデザインでサイトを作成する際には便利な指定方法の1つとなります。

以上が、vwを使ってフォントサイズを指定する方法となります。