# 縦向きか横向きに画面の向きが固定されたページ

Source: https://easeweb.dev/learn/orientation
Topics: ズーム、リフロー、文字間隔 > 縦向きでも横向きでもページが使える (WCAG 1.3.4)
The fix: ページを隠す、メッセージで覆う、横倒しにする向きのルールを削除し、代わりに幅に応じたレイアウトにします。狭い画面では1列、余裕があれば複数列です。ある部分に向いた向きがある場合は、閉じられるお知らせで伝え、その下のページは使えるままにします。
Test with: touch, zoom, keyboard
References: https://www.w3.org/WAI/WCAG22/Understanding/orientation.html https://www.w3.org/WAI/WCAG22/Techniques/failures/F97 https://www.w3.org/WAI/WCAG22/Techniques/failures/F100 https://www.w3.org/WAI/standards-guidelines/act/rules/b33eff/ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/orientation

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

あるカフェの事前注文ページに、飲み物と食べ物が価格と「追加」ボタン付きで並んでいます。縦に持てば使えます。スマートフォンを横にすると、メニューが消えます。代わりに白い画面の中央に「スマートフォンを縦向きにしてご利用ください。」とだけ表示され、向きを戻すまで、ページのほかの部分は読むことも押すこともできません。

逆向きの固定もよくあります。座席表、ゲーム、スライドショーのように横長の画面向けに作られたページが、縦向きではCSSのtransformで自分を横倒しにします。文字は画面の上から下へ流れ、スマートフォンを横にしないと読めません。

## 確認できる問題

達成基準1.3.4「表示の向き」はレベルAAで、WCAG 2.1で追加されました。コンテンツは、その向きが必須である場合を除き、表示と操作を縦向きか横向きの一方に制限してはなりません。W3Cは、ここで挙げた二つの形をどちらも不適合の例にしています。端末の向きを変えるよう求めるメッセージを表示するF100と、向きを固定するF97です。transformでページを回すことも、F97に含まれます。

この基準が対象とするのはページで、利用者自身の設定ではありません。スマートフォンの画面回転をロックしている人は自分で向きを選んでおり、固定のないページはその向きに従います。必須の例外の範囲は狭く、Understandingの文書が挙げるのは、横長の小切手を撮影する銀行のページと、縦向きでは鍵盤が小さくなりすぎるピアノです。「この向きのほうがきれい」は必須ではなく、片方の向きでしか描かれていないデザインも必須ではありません。

画面の大きさによる変化も対象外です。縦向きで1列、横向きで2列になるページは、何も制限していないため問題ありません。どちらの表示にも同じ内容と操作要素があります。

## 利用者への影響

この固定は、`max-height: 500px`のような高さの条件と組み合わされ、スマートフォンでだけ働くことがよくあります。マウントに固定された端末があるのはまさにそこで、デスクトップやノートパソコンでは、チームの誰も目にすることがありません。

## 自動チェックとAIの限界

スキャナーはページを一つのウィンドウの大きさで一度読み込むだけなので、出会う向きは一つで、ページはその向きでは動きます。axeの向きのルールはtransformで回されたページを探しますが、実験的なルールで通常の実行には含まれず、メッセージの裏に隠された内容は探しません。EaseWebの診断は、各ページをスマートフォンの大きさで両方の向きに表示し、一方の向きで隠されたり覆われたりする内容を報告します。コーディングアシスタントに「縦向き専用にして」と頼むと、まさに不適合となるメディアクエリーを書き、1.3.4の修正を頼むと、メッセージの言い回しだけを和らげてページは隠したままにすることがあります。

## 修正前：横向きでメッセージの裏に隠れるページ

```html
<div class="turn-message">スマートフォンを縦向きにしてご利用ください。</div>
<main>…</main>
```

```css
.turn-message {
  display: none;
}
@media (orientation: landscape) and (max-height: 500px) {
  main {
    display: none;
  }
  .turn-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
}
```

スマートフォンを横にすると、メディアクエリーがメニュー全体を隠し、回すよう求める文だけを表示します。回せない人は注文できません。

## 修正前：縦向きで横倒しになるページ

```css
@media (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100vh;
    height: 100vw;
  }
}
```

縦向きではページが横倒しに描かれるため、横向きでしか読めません。内容はすべて残っていますが、文字は画面の上から下へ流れ、縦に固定されたスマートフォンは回して直すことができません。

## 修正後：幅に応じた一つのレイアウト

```html
<main>…</main>
```

```css
/* 向きのルールはなし。メニューは狭い画面で1列、
   余裕があれば、どちらの向きでも2列以上になる。 */
.menu {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
```

メッセージと向きのルールがなくなり、ページはどちらの向きでも同じメニューを表示します。横向きではスマートフォンの幅が広いのでグリッドは2列、縦向きでは1列になります。レイアウトは使える広さに応じて変わり、それこそが向きのクエリーで代わりに表そうとしていたことです。デスクトップの狭いウィンドウやタブレットの画面分割のように、向きが意味を持たない場合でも機能します。

## 実装の判断

何を表示するかの判断に、向きのクエリーを使わないでください。座席表のように、本当に一方の向きのほうが使いやすいレイアウトもあります。その場合も、固定せずに伝える方法があります。

- 提案：「スマートフォンを横にすると座席表が大きくなります」のような短いお知らせを閉じられる形で出し、その下の座席表は使えるままにする。
- 専用の枠内でのスクロール：座席表は幅を保ち、キーボードで移動してスクロールできる枠の中で横にスクロールする。「[狭い画面で横スクロールが出るページ](/ja/learn/reflow)」も参照してください。
- 切り替え：座席表の代わりに座席の一覧を出すボタンのように、画面に合う表示へ切り替える操作を用意する。W3Cの達成方法G214がこの方法です。

横向きのスマートフォンは縦が短く、約390 CSSピクセル、ブラウザー自身のバーを除くとさらに短くなります。固定のヘッダー、Cookieバナー、下部のバーが重なると、読めるページがほとんど残りません。向きの固定ではありませんが、横向きが使えないことに変わりはありません。高さが約500ピクセルを下回るときは、固定バーをスクロールで流すか、小さくしてください。

スクリプトやインストールしたウェブアプリも向きを固定できます。`screen.orientation.lock()`は全画面でのみ働くため、ゲームや動画プレーヤーで使われます。使わないか、利用者が選べる設定にしてください。インストールしたウェブアプリは、マニフェストの`orientation`で向きが決まります。この項目を書かないか、`any`にしてください。

スマートフォンを回すと`resize`が発生し、それをきっかけにページを作り直すことがあります。向きが変わっても、入力した内容、開いていたもの、フォーカスの位置を保ってください。

## 修正の確認

1. 各ページのテンプレートをスマートフォンで縦に持って開き、横にする。またはブラウザーのデバイスツールバーで390×844と844×390ピクセルにする。どちらの向きでも同じ内容と操作要素があり、回すよう求められないことを確認する。
2. スマートフォンの画面回転ロックをオンにしたまま、注文や会員登録のようなサイトの主な作業を、縦向きと横向きでそれぞれ最後まで行う。
3. フォームを途中まで入力し、メニューを開いたまま、作業の途中でスマートフォンを回す。入力した内容が消えず、フォーカスがその場に残ることを確認する。
4. タブレットで、または768×1024と1024×768ピクセルで、手順1と2を繰り返す。
5. スタイルシートとスクリプトで、向きのメディアクエリー、`screen.orientation.lock`、マニフェストの`orientation`を検索し、どれもページを隠したり、覆ったり、回したりしていないことを確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。サイトのレイアウトや共通のスタイルを変更した際は、再度確認します。

## 制限

このサンプルは、どのページでも同じ結果になることを保証するものではありません。一方の向きが本当に必要なコンテンツもあり、必須の例外が適用されますが、それはその部分だけです。サイトのほかの部分は、両方の向きで使える必要があります。1.3.4を満たすレイアウトでも、高さが低いと文字が切れる、固定バーの下にフォーカスした要素が隠れるなど、横向きで別の基準を満たさないことがあります。利用者が使う端末やマウントで、一連の操作を確認してください。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）