「vw(viewport width)」の使いどころ

CSS3の設定で、フォントサイズに「vw」という単位を使うと、スクリーンサイズに合わせてフォントサイズが自動的に伸縮させることができる。

すぐに思いつくのが、イメージにテキストを載せた場合だ。イメージの上に載せたテキストに「vw」を使用すれば、スクリーンサイズに合わせてイメージと同様に伸縮させることができるので、レスポンシブデザインを解決できる。これを用いない頃は、いくつものブレークポイントを必要とした。

また、レスポンシブでh1からh3などの大きいサイズの見出しのテキストを配置する場合、テキストが二行に渡ったり(改行したくないところで改行する)、長さがばらつく(句読点だけが改行されたり…)ので画面サイズ毎にブレークポイントを確認して調整をする必要があったが、それがなくなる。

「(portrait)」と「(landscape)」

次に、メディアクエリを設計する場合に、デバイスが「モバイルの縦方向」であるか、「モバイルの横方向」であるか、「タブレットの縦方向」であるか、「タブレットの横方向」であるかの四種類の内容を条件分岐として考えてみる(※PCはタブレットのグループにして考察)。狙いはメディアクエリの簡略化。想定したブレークポイントは以下の通り。

• モバイルの(portrait)を(min-width:320px)から(max-width:540px)までと想定する。(iPhone SEが最短の320px、SO-04Hが最長の540px) @media (orientation: portrait) and (min-width:320px) {…}
• モバイルの(landscape)を(min-width:568px)から(max-width:896px)までと想定する。(iPhone SEは最短の568px、iPhone XS Max / XRは最長の896px) @media (orientation: landscape) and (min-width:568px) {…}
• タブレットの(portrait)を(min-width:720px)からと想定する。(iPadの幅は768px、iPad Proは1024px、Note-PCは最短の720px)…この設定により、モバイルの(portrait)は上で想定したものを超えて、320pxから719pxまでが範囲となる。 @media (orientation: portrait) and (min-width:720px) {…}
• タブレット・PCの(landscape)を(min-width:1024px)からに設定する(iPadは最短の1024px)。…この設定により、モバイルの(landscape)は、上で想定したものを超えて、568pxから1023pxまでが範囲となる。 @media (orientation: landscape) and (min-width:1024px) {…}
• 上記のモバイルファーストの順(サイズ順)でメディアクエリを記述する。CSSの内容は画面サイズで振り分けられる。

「vw」の求め方

ファントサイズの「vw」の求め方は以下のようになる

準備として、対応させる画面の一行に収まる文字数を任意で想定する。「h1、h2、h3、h4、pなど」が対象だ。

画面は上記の4種類があるので、各々の文字数を考慮する。「vw」を求めるには、まず文字サイズのピクセルを求める。

• (画面の横幅のサイズ－左右の余白)÷一行の文字数＝Aピクセル

そのピクセルをvwへ変換する。

• (Aピクセル÷(画面の横幅のサイズ－左右の余白))×100＝B(vw)

上記が可能になれば、どうなるか？

例えば、モバイルの(portrait)を(min-width:320px)から(max-width:540px)までを対象としたメディアクエリは、横方向に拡がるテキストのレイアウトを全てのモバイルでほぼ同一に仕上げることができる。

最新のデバイスに対応する

この方法に至った経緯をお話ししておこう。最新のデバイスが次々に登場し、世の中には様々な画面サイズが溢れている。巷では、「iPhone XS Max / XRが出たせいでデザイン・レイアウトが大変なことになっている」なんていう話が転がる。では、その都度、デバイスの新製品をチェックし、レスポンシブ対応をしなければならないのだろうか？何か解決策はないものか？と漠然と思ったのが始まりだ。

良い結果にたどり着くまで、久々に手応えのある内容だった。「vw」の検証を済ませてから「(portrait)」や「(landscape)」を使ったメディアクエリを検証していった。

4グループに分けた画面サイズは、(min-width:_px)だけでブレークポイントを構成する。大画面が続々登場している昨今、(max-width:_px)を気にしなくて良いのは非常に好都合だ。(min-width:_px)だけでブレークポイントを構成したメディアクエリの範囲は、次のブレークポイントの(min-width:_px)直前まで、ついでに「(portrait)」や「(landscape)」で条件は振り分けられる。