Windowsだけ横スクロールしてしまうvwの落とし穴【100vwがはみ出す理由】

※本ブログの目的は個人の備忘録であり、コードは参考用として掲載しています。
実際に使用される際は、ご自身の環境で十分に動作確認を行ってください。
コードの利用によって生じたいかなる問題についても責任を負いかねますので、あらかじめご了承ください。

はじめに

「Macでは問題ないのに、Windowsでだけ横スクロールが出てしまう…」

そんな経験はありませんか？

私も以前、「要素が横にスクロールできてしまっている」と指摘を受けたことがあります。

CSSで 100vw を指定しているのに、なぜ？ と不思議に思いました。

この現象の原因は、CSSの vw（ビューポート幅）単位がOSやブラウザによって扱いが異なることにあるかもしれません。

特に Windows環境では、vw にスクロールバーの幅が含まれるケースがあるため、注意が必要です。

参考資料

vw の定義は仕様上明確に定められていますが、実際の動作はブラウザ実装やスクロールバーの有無によって異なります。

CSS Values and Units Module Level 3（W3C公式仕様）

ビューポート相対単位（vw, vh, vmin, vmax）の定義が記載された公式仕様書です。

5.1.2. Viewport-percentage Lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block—​which is itself based on the size of either the viewport (for continuous media) or the page area (for paged media). When the height or width of the initial containing block is changed, they are scaled accordingly. However, any scrollbars are assumed not to exist.

google翻訳にて日本語に翻訳しますと、

ビューポートパーセンテージの長さは、初期包含ブロックのサイズを基準とします。
初期包含ブロック自体は、ビューポート（連続メディアの場合）またはページ領域（ページメディアの場合）のサイズに基づきます。
初期包含ブロックの高さまたは幅が変更されると、それに応じてサイズが変更されます。
ただし、スクロールバーは存在しないものとみなされます。

つまり、スクロールバーの幅はビューポート幅の計算に含まれない仕様になっています。

そのため、Windowsのように「スクロールバーが常時表示される」環境では、100vw が実際の表示領域より広く計算され、横スクロールが発生することがあります。

📄 CSS Values and Units Module Level 3 – W3C

なぜWindowsでだけ横スクロールが発生するのか

CSSの vw は「ビューポートの幅の1%」を表します。

つまり、100vw であれば画面いっぱいになるはずですが、Windowsには落とし穴があります。

環境

100vwにスクロールバーが含まれるか

備考

Windows

含まれる

スクロールバーが常に表示される

macOS

含まれない

スクロールバーはオーバーレイ式

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 は便利な単位だが、スクロールバー幅を含む場合があることを意識する
  • 特に Windows では 100vw = 画面 + スクロールバー となり、横スクロールやレイアウト崩れが発生しやすい
  • overflow-x: hidden; や width: 100%; などで制御することが重要

おわりに

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

「Macではうまくいっているのに…」と感じたときは、まず vw 周辺の指定を疑ってみましょう。

この記事が、vw によるトラブルで悩む方の参考になれば幸いです。