フォントサイズを可変にできるCSSの単位vwでダイナミックなリキッドデザイン

CSSの単位にvwというのがあります。Viewportの横幅の割合を使った単位のことで%と同じように感じてしまいがちですが、フォントサイズの指定に利用すると両者には大きな違いがあります。

vwを文字サイズに指定するとどうなるのか？

ブラウザ幅に合わせて可変します！！%が基本となる文字サイズの割合なのに対し、vwはブラウザ幅の割合です。これを利用することにより画面幅に合わせてダイナミックに可変するリキッドデザインを実現することが可能になります！

vwでフォントサイズを可変にするメリットとデメリット

表示幅に合わせて文字サイズを可変にできるなら、これからのフォントサイズ指定はvwだけでいいじゃん！って思ってしまうかも知れませんが、それは早計です。確かにvwでフォントサイズ指定を行うとフォントサイズも可変するダイナミックなリキッドデザインを再現することが可能ですが、よくよく考えて使わないと、レイアウトそのものが崩壊してしまうこともあります。

vwでフォントサイズを指定するデメリット

まずはデメリットから

max-widthを指定したとき

max-widthを指定したとき、フォントサイズにvwを指定するのは危険です。なぜならレイアウト上はmax-widthで止まるのかもしれませんがフォントサイズはそこで止まらずブラウザ幅が大きくなればなるほど止めどなく大きくなってしまうからです。実際問題そんな大きな画面サイズで見る人っているの？ってなりますが、可能性としてゼロではありません。その環境の人には「なんだこの馬鹿でかい文字は！」となってしまうのです。

高さを指定した場合

このケースもmax-widthの時と同様で、画面の大きさによっては文字サイズが指定した高さを超えてしまい、レイアウトが破綻してしまう可能性があります。可能性としては低いですが、ゼロでは無いことを念頭に置いておく必要があるでしょう。

スマホサイトの横向き

同じような理由が続きますがスマホの横向きも注意しておく必要があります。特にスマホの横幅は高さがありませんので、ただただ見にくいデザインになってしまう危険性が潜んでいます。どれだけでの人が横幅でスマホサイトを見ているかは置いといて、うまく工夫しなければならないでしょう。

vwでフォントサイズを指定するメリット

vwでフォントサイズを指定するメリットはとにかくダイナミックなデザインが実現できることです！！！！エラスティックレイアウトデザインといいましょうかリキッドデザインといいましょうか、迫力あるデザインが再現できます。

こちらのページはフォントザイズをvw指定で制作しています。ご参考になれば幸いです！

スマホの下位互換

スマホサイトの画面サイズは年々大きくなっており古いサイズのスマホはレイアウトのサポートから外してしまうこともあります。そんな時に便利なのがvwです。画面サイズでフォントサイズを指定するので、キャッチコピーの一文字落ちなんかを避けることもできますし、横並びのナビゲーションでもレイアウトを担保できるメリットがあります。

一文字落ちを避けることができる

先ほどちらっと触れましたがレイアウトを担保しながらキャッチコピーの一文字落ちを防ぐことができます。なるべく大きく見せたいが、複数のデバイスのことを考慮すると少し小さめにデザインしておいたほうが・・・・なんて気遣いなく、ベストなデザインを行うことが可能です。

まとめ

vwを使うとフォントサイズを可変でデザインすることが可能です！しかしなんでもかんでも可変でいいってわけじゃありません。可変になるってことはそれだけレイアウトも変わるわけですから、いろんな環境での検証も必要になります。しかし、使い所をおさえればこれまで以上の表現力を手に入れることができるのではないでしょうか。