MENU

Windows 11でのChrome・Edge表示崩れ原因と対策｜100vw問題と高DPI検証の完全ガイド

Windows11

Windows 11のPCで、自社サイトが「EdgeやChromeだけレイアウトが崩れる」「高DPI環境だけ横スクロールが出る」といった相談が急増しています。本記事では、Windows 11＋Chromiumブラウザ特有の表示崩れの原因を分解し、実務でそのまま使える優先度順チェックリストとCSSの落とし穴、そして125％・150％スケーリング環境での検証方法までを整理して解説します。

目次

Windows 11で自社サイトが崩れるときにまず把握したいこと

Windows 11＋Edge/Chromeでよく報告される症状は、次のようなものです。

  • 一部セクションが横にずれて余白ができる、またははみ出す
  • テキストと画像が重なって読めない
  • フォントサイズや行間が他環境と微妙に違う
  • 一部ページだけ横スクロールバーが出てしまう

これらは「Windows 11だからバグる」というよりも、以下の要素が重なって顕在化しやすくなった結果です。

  • Windows 11の高DPIスケーリング（125％ / 150％）によるサブピクセルの丸め誤差
  • Chromium系ブラウザ特有のスクロールバーの扱い（100vw問題）
  • Flexbox/Gridの初期値仕様（min-width等）
  • Webフォント読み込み時のフォント切り替わり（FOUT/FOIT）

まずは、症状と原因の「当たり」をざっくりマッピングしておきましょう。

症状よくある原因最初に見るポイント
横スクロールが出るwidth: 100vw;や固定幅、ネガティブマージンヒーローセクションや全幅セクションのCSS
要素の重なりposition: absolute＋transform、高DPIの丸め誤差該当ブロックのレイアウト指定とブレークポイント
テキストだけはみ出すFlex/Grid子要素のmin-width初期値子要素にmin-width: 0;が入っているか
フォントが変わると段落が折り返すWebフォントの遅延、line-heightの単位付き指定font-displayとline-heightの指定方法

再現条件の固定：切り分けの前提をそろえる

闇雲にCSSを直しても、ユーザー環境の差で再現しなければ原因特定はできません。まずは再現条件を「固定」するのがスタートです。

検証環境を決める

  • OS：Windows 11
  • ブラウザ：Microsoft Edge / Google Chrome の最新版
  • 表示スケール（OSの設定）：125％ または 150％
  • ブラウザズーム：必ず100％に固定

この状態で、自社サイト（例：https://saadrazaseo.comなど）を開き、「問題が出るページ」と「問題が出ないページ」を洗い出します。

キャッシュ・拡張機能の影響を除外する

  • Edge/Chromeの「シークレットウィンドウ」で開く（拡張機能が基本無効）
  • 開発者ツール（F12）を開き、キャッシュ無効状態でリロード
  • CDNを利用している場合は、キャッシュクリア後に再確認

ハードウェアアクセラレーションの一時OFF

まれにGPU描画の違いで線がブレて見えるケースがあります。恒久対策ではありませんが、ブラウザ設定で一時的に「ハードウェアアクセラレーションを無効化」して、症状が変わるかどうかだけ確認すると切り分けがスムーズです。

横スクロールの即時解消：100vw問題を最優先で潰す

Windows 11の高DPI環境で最も頻出するのが「ページ右側に数ピクセルの横スクロールが出る」問題です。多くは以下のパターンです。

width: 100vw;がスクロールバーを含んでしまう

Chromium系ブラウザでは、100vwが「スクロールバーも含めたビューポート幅」になるため、縦スクロールバーの分だけコンテンツがはみ出し、横スクロールバーが表示されます。

指定意味横スク発生リスク
width: 100%;親要素のコンテンツ幅いっぱい低い
width: 100vw;ビューポート幅（スクロールバー込み）高い（デスクトップで要注意）

ヒーローセクションや「全幅」背景セクションで、ページビルダーやテーマが自動的に100vwを付与していることも多く、WordPressでは特に注意が必要です。

基本対策：原則は100%を使う

  • レイアウト幅は原則width: 100%;を使う
  • どうしてもビューポート基準にしたい場合は、はみ出しが出ていないか要素を限定して検証する
/* NGになりやすい例 */
.hero {
  width: 100vw;
}

/* まずはこれを試す */
.hero {
  width: 100%;
}

最終手段：overflow-xでカットする

原因要素の修正がどうしても難しい場合は、最終手段としてページ全体の横オーバーフローをカットします。

:root {
  scrollbar-gutter: stable both-edges;
}

body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}
  • scrollbar-gutterはスクロールバー分のスペースを確保し、レイアウトのガタつきを軽減します。
  • overflow-x: clip;は比較的新しいプロパティなので、古いブラウザ向けにhiddenへフォールバックしています。

ただし、「原因を直さずに隠しているだけ」なので、できる限り元の幅指定（100vwや固定width）を見直すのが理想です。

Flexbox / Grid 子要素のはみ出しを防ぐ

横幅いっぱいにカラムを並べるようなレイアウトで、テキストが親から突き抜ける場合、多くはFlex/Gridの初期仕様によるものです。

min-width: 0; / min-height: 0; を明示する

FlexboxやGridでは、子要素のmin-widthが自動計算されるため、長いテキストや大きな画像が縮まず、そのまま横にはみ出してしまうことがあります。これを防ぐには、子要素側で明示的にmin-width: 0;を指定します。

.flex-container {
  display: flex;
}

.flex-item,
.grid-item {
  min-width: 0;
  min-height: 0;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

特に、カード型レイアウトや「テキスト＋画像」2カラム構成では、左（or右）のテキストブロックにmin-width: 0;を指定するだけで、Windows 11でもきれいに折り返されるケースが多く見られます。

よくあるはみ出しパターン

レイアウト具体例対策
2カラム（テキスト＋画像）テキストが長いと右端で切れるテキスト側にmin-width: 0;
カード一覧カード内のタイトルが枠外にはみ出すカード本体にmin-width: 0;＋長文はword-break調整
Gridでの3列レイアウト特定カラムだけ妙に幅が広いGrid子要素にmin-width: 0;

高DPI特有の小数ピクセル丸め問題とCSS設計

Windows 11では、ノートPCを中心にディスプレイの推奨スケールが125％や150％になっていることが多く、このとき「1px」が実際にはサブピクセル単位に分割されます。その結果、次のような現象が起きやすくなります。

  • 1pxのボーダーが表示されたり消えたりする
  • セクション間に1pxの隙間が見えたり、逆に重なったように見える
  • calc()を多用したレイアウトが特定幅でガタつく

絶対pxを減らし、相対単位を活用する

高DPI環境での丸め誤差を減らすには、「px」だけに依存した設計を避け、remや%、clamp()などの相対単位を積極的に使うのが有効です。

/* PXだけに依存した例 */
.section {
  padding: 40px 60px;
}

/* rem＋clampで余白を調整する例 */
.section {
  padding-inline: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

1px線や罫線は「見え方」を優先して調整

デザインで1pxの罫線を多用している場合、高DPI環境では太さや濃さが変わって見えることがあります。どうしても見え方が気になる場合は、次のような工夫も検討します。

  • 1pxではなく0.5pxや2pxに変えてみる（ブラウザによっては0.5pxが丸められる点に注意）
  • 罫線は疑似要素（::before / ::after）＋transformで位置を微調整する
  • 余白や背景色で「線の役割」を代替し、線自体を減らす

calc()で複雑になりすぎた寸法を整理する

特にレスポンシブ対応のためにcalc()を多用していると、「特定幅＋特定スケール」のときだけ1〜2pxずれる、といった現象が増えます。意図が複雑になっている部分は、一度シンプルな余白設計（一定のpadding＋gapなど）に戻す方が安定します。

ビューポート設定とベースCSSリセット

基本的なビューポート設定とCSSリセットが不足していると、OSやブラウザごとのデフォルト挙動の差が表に出やすくなります。

HTML側の推奨設定

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

viewport-fit=coverは特にモバイル端末での全画面表示に効きますが、PC環境でも統一しておくと挙動が読みやすくなります。

ベースCSSリセット

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

特にbox-sizing: border-box;は、余白計算のブレを減らすために必須と言ってよいレベルです。

position / transform / overflow の見直しポイント

装飾的な演出のためにposition: absoluteやtransformを多用していると、高DPI環境や特定ズーム率での誤差が目立ちやすくなります。

包含ブロックと重なりの確認

  • position: absolute;要素の位置基準（包含ブロック）がどこか
  • transform: translate()などで「見た目だけ」合わせていないか
  • 基準となる親要素にposition: relative;が付いているか

微調整のためにtransform: translate(0, -50%)などを多用していると、OSスケールの違いで重なり方がずれる可能性が高くなります。可能であれば、余白やflex / gridレイアウトで自然にセンタリングする設計に置き換えるのがおすすめです。

position: stickyが効かない場合

Windows 11固有の問題ではありませんが、以下のようなケースでposition: stickyが効かないことがあります。

  • 祖先要素にoverflow: hidden;やoverflow: auto;が指定されている
  • 親要素の高さが足りず、スクロール範囲がない

特に、「セクションの中にスクロールコンテナを作り、その中でstickyを使いたい」という場合、どこまでをスクロールコンテナにするかを再設計する必要があります。

フォント読み込みと行間の設計

Webフォントは、Windows 11環境のEdge/Chromeでも「読み込み中は代替フォントが表示され、その後切り替わる」という挙動を取ります。この切り替え時に段落の折り返し位置が変わると、レイアウトが一瞬崩れたように見えたり、CLS（Cumulative Layout Shift）のスコアが悪化します。

font-display: swap;でレイアウトの揺れを抑える

フォント定義にfont-display: swap;を指定し、フォントの切り替わりを素早く行うことで、ユーザー体験を改善できます。

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
  • 形式はwoff2をメインに、必要に応じてwoffを追加
  • フォールバックフォントにsystem-uiや"Segoe UI"、"Roboto"などを明示

line-heightは数値指定を基本にする

line-height: 1.6;のように単位なしの数値で指定すると、フォントサイズが変わっても行間比率が一定になります。これに対し、line-height: 24px;などのようにpxで固定してしまうと、OSやブラウザのレンダリング差が出やすくなります。

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;  /* 単位なしがおすすめ */
}

画像・メディアのレイアウトを安定させる

画像や動画が読み込み途中にサイズ不明だと、コンテンツが後から押し下げられ、レイアウトシフトが発生します。Windows 11環境でも、CLSの悪化は体感的な「崩れている感」に直結するため、早めに対策しておきたいポイントです。

aspect-ratioでアスペクト比を指定する

.thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

このようにアスペクト比を指定しておけば、画像が読み込まれる前から必要な縦幅が確保され、CLSを大きく減らせます。

背景画像のパララックスに注意

background-attachment: fixed;を使ったパララックスは、環境によってはカクつきや描画崩れが起きやすい表現です。特に高DPI＋高解像度画像の組み合わせでは、パフォーマンス低下やズレの原因になりやすいため、可能であればJSライブラリやCSS Scroll-Driven Animationsなど、より制御しやすい手段に置き換えることを検討しましょう。

Windows 11＋高DPI環境でのクロスブラウザテスト手順

実務では、ローカルPCだけでなく、クラウドテストサービスやツールを組み合わせて「再現性のある検証フロー」を作ることが重要です。

テスト条件の組み合わせ例

OSブラウザOSスケールブラウザズーム
Windows 11Edge 最新版100％100％
Windows 11Edge 最新版125％100％
Windows 11Chrome 最新版125％100％
Windows 11Chrome 最新版150％100％

特に125％と150％の組み合わせで、横スクロールや要素の重なりが出ないかを重点的に確認します。

開発者ツールでの調査ポイント

  • Elementsパネルで、はみ出している要素に赤いアウトラインが付いていないか（Edge/Chromeにはオーバーフロー検出の拡張機能もあります）
  • Stylesパネルからwidth・margin・transform・positionを確認
  • Renderingパネル（またはLighthouse）でCLSやレイアウトシフトの有無を確認

ビジュアルリグレッションテストの活用

本格的に品質を高めたい場合、PercyやApplitoolsなどのビジュアルリグレッションツールを使うと、「スケール100％の時」「スケール125％の時」といった差分を自動検出できます。特に、デザイナーやクライアントがWindows 11を使っている場合は、これらの環境をテストフローに組み込んでおくと安心です。

代表的な「落とし穴」と対処の要点まとめ

ここまでの内容を、Windows 11 / Chromium系で特に顕著な「落とし穴」として整理します。

落とし穴何が起きるか対処のポイント
100vw問題スクロールバーを含んで横スクロール発生width: 100%;を基本に、必要に応じてscrollbar-gutter: stable;
125％ / 150％スケール小数ピクセルの丸めで1pxのズレが発生px依存を減らし、remや%、clamp()を活用
Flex/Grid子のmin-widthテキストや画像が親要素からはみ出す子要素にmin-width: 0;とmin-height: 0;を指定
Webフォント遅延フォント切り替わり時にレイアウトが揺れるfont-display: swap;＋line-heightは単位なしで指定
overflowとsticky意図したスクロール追従が効かないsticky要素の祖先にあるoverflow指定を見直す

実務ですぐ使えるスニペット集

HTML側の基本スニペット

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

ベースリセット＋画像の基本ルール

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* フレックス／グリッドのはみ出し抑制 */
.flex-item,
.grid-item {
  min-width: 0;
  min-height: 0;
}

横スクロール対策（最後の盾）

:root {
  scrollbar-gutter: stable both-edges;
}

body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

カードレイアウトでの高DPI対策例

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.card {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
}

.card-text {
  font-size: 0.95rem;
  line-height: 1.7;
}

このように、min-width: 0;＋相対単位を組み合わせると、Windows 11の高DPI環境でも安定した見た目を保ちやすくなります。

テスト観点と受け入れ基準の例

最後に、Windows 11対応のWebサイトで「ここまで確認できていればOK」と言える、受け入れ基準の一例を示します。

テスト観点のチェックリスト

  • Windows 11 / Edge 最新版
    • スケール100％・125％・150％、ズーム100％で主要ページを確認
  • Windows 11 / Chrome 最新版
    • スケール100％・125％・150％、ズーム100％で主要ページを確認
  • 条件ごとに、以下をチェック
    • 横スクロールが出ていない
    • セクション間の妙な隙間や重なりがない
    • 主要ページのフォントと行間が崩れていない
    • カードや一覧レイアウトで文字や画像がはみ出していない

パフォーマンス指標の目安

Google Lighthouseなどのツールを使い、以下を目標値とするのがおすすめです。

  • CLS（Cumulative Layout Shift）< 0.1
  • First Contentful Paint（FCP）・Largest Contentful Paint（LCP）が極端に遅くない

CLSが大きい場合は、画像のwidth/heightやaspect-ratioの指定、Webフォントの読み込み方を見直します。

優先度順の実務向けチェックリスト

ここまでの内容を、実務でそのまま使える「優先度順チェックリスト」としてまとめます。

  1. 再現条件の固定
    • Windows 11＋Edge/Chrome最新版
    • OSスケール125％ or 150％、ブラウザズーム100％
    • シークレットウィンドウ＋キャッシュクリアで検証
  2. 横スクロールの即時解消
    • 全幅セクションのwidth: 100vw;をwidth: 100%;へ変更
    • ネガティブマージンや固定幅がはみ出しを生んでいないか確認
    • 最終手段としてscrollbar-gutter＋overflow-x: clip;
  3. Flex/Grid子要素のはみ出し対策
    • レイアウトの子要素にmin-width: 0; / min-height: 0;を追加
    • 画像にはmax-width: 100%;＋height: auto;
  4. 高DPIと絶対pxの整理
    • 余白や幅のpx依存を見直し、rem / % / clamp()を活用
    • 1px罫線が多すぎないか、見え方で再設計
    • calc()で複雑になった寸法をシンプルな設計に戻す
  5. ビューポートとベースリセット
    • <meta name="viewport" …>の確認
    • box-sizing: border-box;を全要素に適用
  6. position/transform/overflowの見直し
    • position: absolute;とtransformで無理な位置合わせをしていないか
    • sticky要素の祖先のoverflow指定を確認
  7. フォント・行間の最適化
    • Webフォントにfont-display: swap;を設定
    • line-heightは単位なしで数値指定
    • フォールバックフォントを明示し、Windows向けフォントも考慮
  8. 画像・メディアの安定化
    • 主要な画像・サムネイルにaspect-ratioやwidth/heightを指定
    • 背景画像パララックスの挙動を高DPI環境で確認
  9. クロスブラウザ／高DPIテスト
    • Windows 11＋125％/150％スケールをクラウド実機で再現
    • Lighthouseやビジュアルリグレッションでレイアウト差分を確認
  10. キャッシュ／拡張の影響確認
    • CDNキャッシュの更新状況を確認
    • 特定のブラウザ拡張によるCSS上書きがないか確認

まとめ：Windows 11時代のWebレイアウト設計の考え方

Windows 11のEdge/Chromeで起きる表示崩れは、「OS固有のバグ」というより、これまで見過ごされていたCSSの設計上のクセが、高DPIスケーリングやChromium系ブラウザの仕様によって表面化したものだと言えます。

実務的には、次の順番で手を入れていくのがおすすめです。

  • 横スクの原因要素（100vwやはみ出し要素）を特定して直す
  • Flex/Grid子のmin-width: 0;を徹底する
  • 高DPIと絶対pxの依存を見直し、相対単位ベースの設計に移行する
  • Webフォントとベースリセットでレイアウトを安定させる
  • Win11＋125％/150％を前提にテスト環境を整える

この流れで対応すれば、「Windows 11だけ崩れる」「Edgeユーザーだけクレームが来る」といった状況を大きく減らすことができます。自社サイトやクライアントサイトの品質を底上げするために、本記事のチェックリストとスニペットをそのままプロジェクトに組み込んでみてください。

Windows11
Edge Chrome CSS Windows11 表示崩れ Web制作

この記事を書いた人

佐藤健司のアバター 佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。

関連記事

コメント

コメントする

目次