webサイトのレスポンシブデザイン。幅の単位にvwを使って最適化すると超幸せ。

2020年06月15日 2021年02月21日

「vw」はView Width。PCだとブラウザの幅。スマホだとスクリーン幅を指す。

「ビュー」つまり、表示しているブラウザ幅の最大値を100とした時の相対値。
例えば、50vwを指定した要素をWebページ内に配置したとする。
その場合、その要素は、ブラウザの幅の50%の幅になる。
ブラウザの大きさをドラッグで広げていくとすると、ブラウザ幅の50%のサイズを維持しながら、大きくなっていく。
基準値が「ビュー」という一意のものなので、同じvwを指定した要素であれば、それをWebページ内のどこに置いたとしてもの見た目の幅は同じになる。

他の「px」「%」単位との違いは？

px（ピクセル）

ピクセル幅。これは固定サイズを示す物に使われる。かっちりと「この幅」と決めて動かさないようなもの。
スマホの機種が変わろうが、閲覧しているブラウザの表示サイズが変わろうが、同じサイズで指定したいときに使う。

%（パーセント）

パーセントサイズ。「%」は、100%がサイズがいかほどか、それを設定する場所で変わる。
例えば、幅200ピクセルの入れ物の中で100%を指定すれば、200ピクセルになるし、幅500ピクセルの入れ物の中で50%を指定すれば、250ピクセルになる。その「%」をどこで指定するかで、そのサイズも変わってくる。

なぜ「vw」を単位に使うと、レスポンシブデザインが捗るのか。

小さい画面サイズ、大きい画面サイズに対応しやすくなるというのが一番のメリット。
vwでサイズ指定をしておく、ビューのサイズにあわせて、要素のサイズが変わるので、あらゆる解像度のデバイスに対応しやすい。
pxサイズで指定すると、小さい画面だと、はみ出し、大きい画面だとこじんまりしてしまうということが起きる。
ブレイクポイントがすごく増えた、とか、タブレットを縦にして表示した時、ヘッダー部分が画面内に収まらない等。単位をvwにしておけば、基準がビューのサイズなので、そういうことが起こり得ない。また、スマホ用のコードの書き分けが少なくなり、すっきりとしたわかりやすいコードにできるということもある。
つまりはバグや表示不具合も起きにくくなる。