画面幅によってサイズが決まるvwについて解説

vwとは Viewport Width (ビューポート幅) の略でレスポンシブデザインにおいて画面サイズに応じた柔軟なレイアウトを作るために使われる単位です。

vwを使うと、画面幅に対して相対的なサイズの指定が可能です。

vwで指定したときのサイズが決まる仕組みについて解説していきます。

vwは画面幅に対して相対的にサイズが決まります。

例えば、width: 0vw; のときは横幅が0pxとなり、width: 100vw; のときは画面幅と同じ横幅になります。

仮に画面幅が1000pxのときに下記のコードを指定するとどうなるか、計算式と画面の表示を確認してみましょう。

.vw-30 {
  width: 30vw;
}

今回は width: 30vw; と指定しているので、画面幅が1000pxのときは

1000px(画面幅) × 30vw(30%) = 300px

となり、width(横幅) は300pxになります。

これを見ると、vwは画面幅に対して%で掛け算をしてサイズが決まるのがわかります。

ちなみに画面の表示は下記のようになります。(※CodePenを開き検証ツールで横幅を確認してみてください。)

この記事では画面幅によってサイズが決まるvwについて解説しました。

vwの特徴は下記の通りです。

vwを使いこなせるとレスポンシブ対応の際に役立つことが多いです。

しっかり理解しておきましょう。

最後までお読みいただきありがとうございます。