レスポンシブサイトに便利!「vw」「vh」で画面幅に応じた文字サイズ指定方法 | 株式会社イー・フュージョン
Loading...

新着情報


レスポンシブサイトに便利!「vw」「vh」で画面幅に応じた文字サイズ指定方法

2021年5月25日

レスポンシブサイトに便利!「vw」「vh」で画面幅に応じた文字サイズ指定方法

レスポンシブサイト制作で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に変換してくれる便利なサイトを紹介します。



pxをvwに変換するツール
PX TO VW

これらの計算ツールを使えば、毎回暗算しなくて済みますので、おすすめです。

文字サイズにvwを使う時の注意点

vwを使うことにより簡単にレスポンシブの文字サイズを実装できますので、使い勝手が良いです。でも、良いことばかりではありません。
vwを使うにあたり注意点がいくつかありますので、ご紹介します。


①ブラウザ設定から文字サイズ変更しても反映されない

ブラウザにはユーザー側で文字サイズを設定できるオプションがあります。
Chromeでしたら、「表示」→「拡大」「縮小」をクリックすることにより、文字サイズを変更できます。 でも、文字サイズをvwで設定するとこの設定が反映されません。 ブラウザの横幅を基準にサイズを設定している為、 ブラウザの横幅が変わらなければ、文字のサイズを変えることはできないのです。


②スマホを横向きにすると文字サイズが大きくなりすぎてしまう

vwは画面の横幅の数値を基準にしていますので、スマホを横画面にした場合、極端に文字の大きさが変わってしまいます。 こちらの対策として、vminやvmaxという単位を使います。 この対策方法は次回にご紹介いたします。

**

vwを使ったレスポンシブ文字の指定方法を紹介しました。 ブレイクポイントを細かく設定しなくてよいので、使い勝手がよいですよね。 使用するのにいくつか注意点はありますが、ぜひ実際に使ってみてください。

お問い合わせ

案件のご依頼やご相談などお気軽にご相談ください。

ご依頼やご相談はこちらから
ページトップへ

本社:
〒332-0017 埼玉県川口市栄町3-2-16
サテライトオフィス:
〒150-6090 東京都渋谷区恵比寿4-20-4
恵比寿ガーデンプレイス グラススクエアB1階 PORTAL POINT内
Tel. 050-5533-3616