【CSS】vwと%の違い、使用例

「vwも%も横を基準とする単位なんでしょ？何が違うの？どう使い分ければいいの？」

vwと%の違いとvwの使用例を解説します。

基準が違う

vwと%は単に横を基準とするわけではありません。

%は親が基準

%は親が基準です。100%で親の基準いっぱいになります。

また、CSSによって基準が異なる特徴があります。横が基準となる場合と高さ（縦）が基準となる場合があります。

• 親の横幅が基準：width、margin、padding、left、right
• 親の高さが基準：height、top、bottom
• 親の文字サイズが基準：font-size

%はwidthで使うことが多いでしょう。そのため「%は横幅が基準」と思い込みがちですが、実際はheightのように高さを基準とすることもあります。

あるいは「親の同じ方向が基準」と思い込むこともあるかもしれませんが、marginやpaddingにおいてそれらのtopとbottomであっても親の横幅が基準となります。

heightの%は親の高さを基準としますが親にauto以外のheightが指定されていないと効かないというやっかいな特徴があります。

left、right、top、bottomは主にpositionで使うCSSです。

relativeで使うとpaddingを含まない範囲が基準となり、

absoluteで使うとpaddingを含む範囲が基準となります。

font-sizeの場合、親の横幅ではなく、親の文字サイズが基準となります。

vwはブラウザの横幅が基準

vwはブラウザの横幅が基準となります。100vwでブラウザ幅いっぱいになります。

親の横幅や高さは無視されます。当然paddingも無視です。

どんなCSSでも基準は変わらず、widthだろうがheightだろうがブラウザの横幅が基準です。

vwのwはwidthのwだから横幅が基準、と覚えましょう。

vhはブラウザの高さが基準

vhはブラウザの高さが基準となります。100vhでブラウザの高さいっぱいになります。

vwの高さ版です。

vhのhはheightのhだから高さが基準、と覚えましょう。

vw、vhの使用例

スマホ版やタブレット版で使う

vwはブラウザ幅を基準としますが、パソコンのブラウザ幅は主に最大が1920pxになります。

横幅1920pxのサイトを作ることは稀であり、多くの場合1000px前後を基準として作るでしょう。

こうなるとvwは使いづらいため、主に%を使います。

逆に言えばブラウザ幅が1000px（サイトの横幅）以下であればvwは使いやすくなります。

そのためvwはタブレット版やスマホ版を作るときによく使います。

heightで横を基準にできる

heightで%を使うと高さを基準とします。widthと連動して一定の比率のボックスを作るというときに難しいです。

margin-topに%を指定することで一定の比率のボックスを作ることができますが子要素の入る隙間がありません。

heightにvwを指定するとブラウザの横幅を基準とします。widthにもvwを使うことで基準が同じとなり一定の比率のボックスを作ることができます。

また、heightで%を使うには親にauto以外のheightが指定されていないといけませんが、vwであれば親は関係ないため使いやすいという特徴もあります。

画面と同じサイズにするときに使う

スマホのメニューでは画面と同じ縦横のサイズにすることがあります。

このとき、%で横幅を指定することはできても高さを指定することは困難です。

width:100vw;height:100vhと指定すればスマホの画面と同じ大きさにできます。

このときheightはURLバーを含まないので注意してください。

【まとめ】vwと%の違い

%は親が基準であり、CSSによって基準が異なる特徴がある。

vwはブラウザの横幅が基準であり、どんなCSSでも基準は変わらない。

以上、vwと%の違いでした。