a-little-log

はじめに

「Macでは見た目に問題ないのに、Windowsでだけ横スクロールが出る…」
そんな現象に悩まされたことはありませんか？

この原因は、CSSの vw（ビューポート幅）に関するOS・ブラウザの仕様差にあるかもしれません。
特にWindowsでは、vw の扱いに注意しないと、意図しないレイアウト崩れや横スクロールが発生します。

この記事では、「Windows × vw」の相性問題をテーマに、よくある事例とその対策を詳しく解説します。

なぜWindowsでだけ vw が原因の不具合が起きるのか？

CSSの vw は「ビューポートの幅の1%」を表します。つまり、100vw であれば「画面の幅いっぱい」になるはずですが、ここに落とし穴があります。

Windowsではvwにスクロールバーの幅が含まれるのです。

つまり、Windowsでは 100vw = 実際の表示領域 + スクロールバーの幅となり、 結果的に 要素が画面からはみ出す → 横スクロール発生する事態になってしまいます。

よくある事例と症状

1. margin-right: calc(50% - 50vw); のケース

このコードは、要素を中央揃えするために画面端までマージンを取るためによく利用されますがが、Windows環境では 50vw がスクロールバーの幅も含んだ値になるため、コンテンツが画面の右側にはみ出してしまい、横スクロールが発生します。

必ず親要素にoverflow:hiddenをかけるようにしましょう。

figure {
  margin-right: calc(50% - 50vw);
}

2. width: 100vw; を全幅指定に使う

一見便利ですが、Windowsではbodyがスクロールバーの分だけ広がってしまうため、不要な横スクロールが出る原因になります。なるべくwidth: 100%で指定するようにしましょう。

body {
  width: 100vw;
}

まとめ：vw は便利だが慎重に使うべき

• vw は「スクロールバー込み」の幅になることがある
• 特にWindowsで 100vw = 画面 + スクロールバーとなり、意図せずはみ出す
• overflow-x: hidden や width: 100% を使って制御することが大切
• vw を使うときは、OSやブラウザの差を意識することが重要

おわりに

CSS設計において vw を使うことは非常に便利ですが、Windowsでは思わぬ副作用を引き起こすことがあります。

「Macではうまくいってるのに…」と感じたとき、まずは vw 周辺を疑ってみてください。この記事が vw トラブルで悩む方の助けになれば幸いです。