---
title: "スマホを横向きにすると崩れるときの原因と対処"
description: "縦向きでは問題ないのにスマホ横向きで要素が収まらない固定ヘッダーが邪魔になるという崩れに困っている方向け。横向き特有の幅広・高さ低の状態に対応する対処法をまとめています。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/landscape-mode-layout-break"
markdown: "https://giga-site.com/articles/landscape-mode-layout-break/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# スマホを横向きにすると崩れるときの原因と対処

縦向きでは問題ないのに、スマホを横向きにすると要素が画面に収まらない、固定ヘッダーが場所を取りすぎる、といった崩れが起こります。横向き特有の「幅は広いが高さが低い」状態が原因です。よくある崩れと対処を整理します。

> Source HTML: https://giga-site.com/articles/landscape-mode-layout-break
> Article index: https://giga-site.com/articles/index.md

## 横向きで崩れる根本の原因

スマホを横向きにすると、幅が広がる代わりに高さが極端に低くなります。縦向きを前提に「画面いっぱい」の高さで作った要素は、横向きでは画面に収まりきらず、肝心の内容がスクロールしないと見えない、という事態が起こります。

とくにファーストビューを高さ100vhで作っていると、横向きでは縦の余白がほとんどなくなり、見出しやボタンが押し出されます。横向きは幅だけでなく高さの制約が厳しい、という前提を持つことが対処の出発点です。

## vh単位とアドレスバーの落とし穴

高さの指定にvhを使うと、横向きで内容があふれやすくなります。さらにモバイルブラウザではアドレスバーの表示・非表示でビューポート高が変わり、100vhが実際の見える高さと一致しないことがあります。

対処として、横向きや小さい高さでは100vhを使わず、min-heightで最低限の高さだけ確保し、内容に応じて伸びるようにします。新しい単位のdvh（動的ビューポート高）を使うと、アドレスバーの変化に追従しやすくなります。要素を縦に詰め込みすぎないことも大切です。

## 症状別チェック表

スマホを横向きにすると崩れるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## orientationで横向き専用の調整を入れる

横向きだけ調整したい場合は、メディアクエリのorientation: landscapeで横向き専用のスタイルを書けます。たとえばファーストビューの高さをautoにする、固定ヘッダーを薄くする、要素を横並びにして縦の高さを節約する、といった調整が有効です。

また、高さが低い環境向けに、min-heightや高さ条件のメディアクエリを併用すると、横向きの小型端末でも内容が収まりやすくなります。横向きを禁止して縦向きを強制するのは、使い勝手やアクセシビリティを損なうため、できれば横向きでも見られるように作るのが望ましいです。

## 横向きの崩れを直す手順

次の順で確認すると、横向きの崩れを抑えられます。

1. 実機やエミュレーションでスマホを横向きにし、あふれる要素を特定する
2. 高さ100vhを使っている箇所をmin-heightやdvhに見直す
3. orientation: landscapeで横向き専用の調整を加える
4. 固定ヘッダーやフッターが高さを取りすぎていないか確認し、薄くする
5. 要素を横並びにするなど、縦方向のスペースを節約する
6. 横向きでスクロールせずに主要な内容が見えるか実機で確認する

## 縦横両方の見え方を実機共有で確認する

横向きの崩れは、デスクトップのブラウザでは再現しづらく、実際にスマホを回転させてみないと気づきにくい種類の問題です。複数機種の実機で、縦横を切り替えながら確認するのが確実です。

修正版を関係者に見てもらうなら、ギガサイト便にHTMLやZIPをドロップして共有URLを発行すると、各自が自分のスマホで縦横を切り替えて確認できます。QRコードを配れば手元の端末ですぐ開けて回転を試せます。同じURLのまま中身を差し替えられるので、調整のたびに最新版を見てもらえ、一時公開ページにはnoindexが付いて検索結果に出ません。

## よくある質問

### 横向きを禁止して縦向きだけにするのは良くないのですか。

回転をロックすると、端末を固定して使いたいユーザーやアクセシビリティ上の配慮が必要なユーザーの利便性を損ないます。原則は横向きでも見られるように作り、どうしても縦が前提のコンテンツだけ案内を出すなど、柔軟に対応するのが望ましいです。

### 100vhを使うと横向きで内容があふれます。代わりは何ですか。

固定の高さではなくmin-heightで最低限だけ確保し、内容に応じて伸びるようにするのが基本です。加えてdvh（動的ビューポート高）を使うと、モバイルのアドレスバーの変化にも追従しやすくなります。

### 横向きだけスタイルを変える方法はありますか。

メディアクエリのorientation: landscapeで横向き専用のスタイルを記述できます。高さの低い環境を狙うなら、高さ条件のメディアクエリ（max-height）を併用すると、より細かく横向き・小型端末向けの調整ができます。

### デスクトップで横向きの崩れを再現するには。

開発者ツールのデバイスエミュレーションで端末を選び、向きを横に切り替えると近い状態を再現できます。ただしアドレスバーの挙動などは実機と異なるため、最終確認は実際のスマホを回転させて行うのが確実です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [ブラウザのズーム（拡大表示）でレイアウトが崩れるときの対処](https://giga-site.com/articles/browser-zoom-layout-break/index.md)
- [ダークモードで文字が読めないときの対処](https://giga-site.com/articles/dark-mode-unreadable/index.md)
- [印刷すると崩れる・はみ出すときの対処](https://giga-site.com/articles/print-layout-broken/index.md)
- [CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処](https://giga-site.com/articles/grid-layout-collapses/index.md)
- [読み込み中にレイアウトがガクッとずれるときの原因と対処](https://giga-site.com/articles/layout-shift-loading-jump/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "スマホを横向きにすると崩れるときの原因と対処",
  "description": "縦向きでは問題ないのにスマホ横向きで要素が収まらない固定ヘッダーが邪魔になるという崩れに困っている方向け。横向き特有の幅広・高さ低の状態に対応する対処法をまとめています。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/landscape-mode-layout-break",
  "url": "https://giga-site.com/articles/landscape-mode-layout-break",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "横向きを禁止して縦向きだけにするのは良くないのですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "回転をロックすると、端末を固定して使いたいユーザーやアクセシビリティ上の配慮が必要なユーザーの利便性を損ないます。原則は横向きでも見られるように作り、どうしても縦が前提のコンテンツだけ案内を出すなど、柔軟に対応するのが望ましいです。"
      }
    },
    {
      "@type": "Question",
      "name": "100vhを使うと横向きで内容があふれます。代わりは何ですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "固定の高さではなくmin-heightで最低限だけ確保し、内容に応じて伸びるようにするのが基本です。加えてdvh（動的ビューポート高）を使うと、モバイルのアドレスバーの変化にも追従しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "横向きだけスタイルを変える方法はありますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "メディアクエリのorientation: landscapeで横向き専用のスタイルを記述できます。高さの低い環境を狙うなら、高さ条件のメディアクエリ（max-height）を併用すると、より細かく横向き・小型端末向けの調整ができます。"
      }
    },
    {
      "@type": "Question",
      "name": "デスクトップで横向きの崩れを再現するには。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "開発者ツールのデバイスエミュレーションで端末を選び、向きを横に切り替えると近い状態を再現できます。ただしアドレスバーの挙動などは実機と異なるため、最終確認は実際のスマホを回転させて行うのが確実です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```