レスポンシブサイト制作でwidthやpaddingの数値を指定する時の
単位として「%」を使うことが多いかと思います。
でも、状況によっては「%」より「vw」や「vh」を使った方が
とても便利な場合があります。
最近取り扱ったレスポンシブサイトの案件で、お客様からスマホ表示時の
テキストが変なところで改行されていたり、 端末によってはテキストサイズが
大きいので、サイズを調整してほしいとの依頼がありました。
その時にこの「vw」を使って解決し、便利だなと思ったので、備忘録的に書いておきます。
vwとは？
まずは、単位の説明から。
vwとは、viewport widthを意味し、ビューポート（ブラウザの表示領域）の横幅の1/100の大きさを持った単位です。ビューポートが100pxなら1vwは1pxになります。
例えば、
-ブラウザ幅が1440pxの時、1vw=14.4px -ブラウザ幅が768pxの時、1vw=7.68px -ブラウザ幅が320pxの時、1vw=3.2px
上記のように同じ1vwでもブラウザの幅によって数値が変わります。
これがvwの仕組みになります。
VW以外にもビューポートを基準にした単位があります。
| 単位 | 意味 |
| vw(Viewport Width) | Viewportの幅の1/100 |
| vh (Viewport Height) | Viewportの高さの1/100 |
| vmin(Viewport Minimum) | Viewportの幅と高さの小さい方の1/100 |
| vmax(Viewport Maximum) | Viewportの幅と高さの大きい方の1/100 |
どんな状況で使うの？
ビューポートに合わせて要素の幅や高さを設定しなければならない状況でとても便利です。
vwを使う時に便利なサイト
ビューポートの横幅、pxのサイズを入力するとvwに変換してくれる便利なサイトを紹介します。
これらの計算ツールを使えば、毎回暗算しなくて済みますので、おすすめです。
文字サイズにvwを使う時の注意点
vwを使うことにより簡単にレスポンシブの文字サイズを実装できますので、使い勝手が良いです。でも、良いことばかりではありません。
vwを使うにあたり注意点がいくつかありますので、ご紹介します。
①ブラウザ設定から文字サイズ変更しても反映されない
ブラウザにはユーザー側で文字サイズを設定できるオプションがあります。
Chromeでしたら、「表示」→「拡大」「縮小」をクリックすることにより、文字サイズを変更できます。 でも、文字サイズをvwで設定するとこの設定が反映されません。 ブラウザの横幅を基準にサイズを設定している為、 ブラウザの横幅が変わらなければ、文字のサイズを変えることはできないのです。
②スマホを横向きにすると文字サイズが大きくなりすぎてしまう
vwは画面の横幅の数値を基準にしていますので、スマホを横画面にした場合、極端に文字の大きさが変わってしまいます。 こちらの対策として、vminやvmaxという単位を使います。 この対策方法は次回にご紹介いたします。
**
vwを使ったレスポンシブ文字の指定方法を紹介しました。 ブレイクポイントを細かく設定しなくてよいので、使い勝手がよいですよね。 使用するのにいくつか注意点はありますが、ぜひ実際に使ってみてください。
