見出しのフォントサイズって、購入したWordPressのテーマを使った場合でもなかなか思い通りにならないときってありますよね。特に少し見出しの文字数が多くなりがちな場合、スマホで表示させたときに変なところで改行されてしまったり、文字が大きすぎて見出しなのに３行にもなってしまったりすることがあります。

こういうレスポンシブにまつわるフォントサイズの悩みを解決してくれそうな便利なサイズ指定の方法がありましたのでご紹介します。

表示領域の幅に対する割合でフォントサイズが決まる「vw」「vh」

一般的に、レスポンシブデザインでは、「%」といった相対値を使うのが一般的です、でも、フォントサイズで使用される相対値「%」「em」「rem」というのは、親要素のフォントサイズを基準にした割合なので、スマホの画面で見たときに「画面のサイズに対する文字の大きさはどうなのか？」という問題がいつも付いて回っていました。特に見出しなどの大きめな文字はブラウザの幅に応じて細かい指定が必要だったり、デザインが結構面倒なんですよね。

でも、「vw」「vh」ならページの表示領域の幅を基準にしたサイズ指定ができるので、ブラウザの幅がいくつであろうと１行に入れたい文字数を固定できるというメリットがあります。これなら、見出しが変なところで改行される心配はありません。

「vw」「vh」という値はそれぞれの「viewport width（表示領域の幅）」、「viewport height（表示領域の高さ）」の略になっています。

vw：ページの表示領域の幅に対する割合を表す単位。（表示領域が100%＝100vw）
vh：ページの表示領域の高さに対する割合を表す単位。（表示領域が100%＝100vh）

純粋な数字の計算で考えると１つの行を指定したい文字数を「100÷文字数」で計算した答えを値にすれば良いことになります。
（半角は0.5文字、全角は1文字分ですね）

例えば、
10文字で固定したい場合は「10vw」
15文字で固定したい場合は「6.6vw」
20文字で固定したい場合は「5vw」
25文字で固定したい場合は「4vw」
30文字で固定したい場合は「3.3vw」
という形になります。

ただし、実際にはテキストが入っている要素の他にmarginやpaddingがある都合上、「表示領域＝テキストの領域」でない場合もあるため、実際には上記の値よりも少し小さめに設定する必要があります。

実際にvwで文字数を指定したサンプルを下記に用意してみたのでご確認ください。

表示領域との割合を確認してね。

これは下記のようにフォントサイズを指定しています。

.moji15{font-size:3.3vw;}

3.3vwということは、「100 ÷ 3.3 ＝ 約30」つまり、このサイズ指定の場合、１行に30文字くらい収まる計算です。

今、パソコンでこのページをご覧の方は、上の15文字が大体メインカラム全体に収まっていると思います。
一方、スマホでご覧の方は表示領域に対して半分くらいしかないように見えると思います。これはどういうことかといいますと、パソコン表示の場合は、右側にサイドメニューが表示されるため、その幅の分だけ表示領域に対してテキストの領域の幅が小さいことが原因です。

このような特性があるので、「vw」と「vh」を設定する場合はパソコン表示の２カラムがタブレットやスマホサイズの１カラムに切り替わるタイミングで指定してあげるといいですね。

以上が表示領域を基準にしたフォントサイズの指定方法でした。ぜひ見出しの行をそろえるのに活用してみてくださいね。