この記事でわかること

  • 画面を拡大しても横スクロールさせないために、WCAGの達成基準1.4.10が求めること
  • 幅320pxで読めるようにする、本文と補足の欄の並べ方と、画像の幅の指定
  • 表や地図など、横スクロールがあってもよい部分と、その範囲
  • 幅を狭めて確かめる手順と、内容を消してしまうなどのつまずき

パソコンの画面でページを400%まで拡大すると、ページの幅はスマートフォンほどに狭くなります。このとき、1行の文章が画面の外まで続いていると、読む人は1行ごとに左右へスクロールしなければなりません。この記事では、画面を拡大したときや幅の狭い画面で見たときにも、縦のスクロールだけで読めるページの作り方を、W3Cの資料に沿って紹介します。

基準の説明は、2026年10月25日にW3Cの公式の資料(WCAG 2.2の本文、Understanding、技法、失敗例)を読んで確かめています。動作の確認に使ったのは、この記事のために作った架空のページです。

先に結論: 幅320pxで1列に並び直し、外にはみ出させない

先に結論を書くと、幅を狭めたら本文と補足の欄を1列に並べ直し、画像は欄の幅に収め、表や地図のように横の並びが要る部分だけを、その部分の中でスクロールさせます。 部分ごとの扱いは、次の表のとおりです。

部分 幅320pxでの扱い
文章 画面の幅で折り返す
横に並ぶ欄 縦の1列に並べ直す
画像・動画 欄の幅に縮める
データの表 表の中だけ横に送る
狭くて入らない欄 消さずに別の所で出す

拡大とアクセシビリティの基準

WCAG 2.2の達成基準1.4.10(Reflow)は、レベルAAの基準です。縦にスクロールして読むページなら、幅320 CSSピクセル相当で、情報や機能を失わず、縦と横の両方のスクロールをしなくても見られることを求めています。

WCAGの本文の注記では、320 CSSピクセルは、幅1280 CSSピクセルの画面を400%に拡大したときの幅にあたるとしています。W3Cの解説では、この基準のねらいを、文章などを拡大した人が、2つの向きにスクロールしなくても読めるようにすることだとしています。行が画面の端より長くなると、1行ずつ左右に動かして読むことになり、どこを読んでいたか分からなくなりやすいからです。

欄を1列に並べ直す

W3Cの解説では、記事のページでよく使われる方法として、ページを1列の並びにして、幅320 CSSピクセルの画面に収め、縦のスクロールだけで読めるようにする方法を挙げています。場所を移したり、大きさを変えたりすることは、内容を使える限り、情報や機能を失うことにはなりません。

技法C32では、CSSのグリッドとメディアクエリで、広い画面では横に並ぶ欄を、狭い画面では下に回り込ませる方法を紹介しています。並び方は変わっても、要素どうしの関係と読む順番は変わらないとしています。

画像と動画を欄の幅に収める

写真や図は、切り分けて並べ直すと分からなくなるため、それ自体は2つの向きを持つものです。技法C37では、画像にCSSのmax-widthとheightを指定して、元の縦横の比を保ったまま、使える幅に合わせて大きさが変わるようにする方法を紹介しています。

W3Cの解説では、動画にmax-width: 100%を指定しないと、拡大した画面でも元の大きさのまま残り、ページの横にスクロールバーが出る例を挙げています。指定すると、動画は入れ物の中に収まります。

横スクロールがあってもよい部分

WCAGの本文では、使い方や意味のために2つの向きの並びが要る部分は例外としています。例として挙げられているのは、理解に必要な画像(地図や図)、動画、ゲーム、プレゼンテーション、データの表(1つ1つのセルは除く)、操作の間ずっとツールバーを見せておく必要がある画面です。

ただし、例外になるのはその部分だけです。W3Cの解説では、表を独立してスクロールできる入れ物に入れると、ほかの部分は折り返せるとしています。表の前の見出しや説明の文章、検索の欄、ページ送りは例外にならず、狭い画面に合わせて並び直す必要があります。表の見出しの付け方は、Webデザインのテーブルの見出しの付け方で紹介しています。

書き方の例: 1列への並べ直しと画像の幅

次のCSSは、技法C32・C37の考え方をもとに、本文(.main)と補足(.side)の2つの欄を持つページのために書いた例です。広い画面では2列、狭い画面では1列に並び、画像と動画は欄の幅に収まります。表は、.table-wrapで囲んだ中だけを横に送ります。クラス名と、2列に切り替える幅(992px)は、自分のページに合わせて変えます。

/* 狭い画面では1列(本文、補足の順) */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* 幅が992px以上のときだけ、本文と補足を横に並べる */
@media (min-width: 992px) {
  .layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* 画像と動画は、欄の幅を超えないようにする */
img, video {
  max-width: 100%;
  height: auto;
}

/* データの表だけは、囲んだ中で横に送る */
.table-wrap {
  overflow-x: auto;
}

このCSSは、架空のページに当てて、作業PCのChrome(ヘッドレス)で幅320pxの枠の中に表示し、ページの幅を測って確かめました。手元のサイトでは、ブラウザやほかのCSSによって結果が変わることがあるので、下の手順で確かめます。

手順: 幅を狭めて確かめる

W3Cの技法C32と失敗例F102の確かめ方に沿った手順です。

  1. 広い幅で見る: 幅1280pxほどの画面で、どんな内容や機能があるかを確かめます
  2. 幅を320pxにする: 幅1280pxのウィンドウを400%に拡大します。400%にできないときは、拡大の割合に合わせて幅を減らします(300%なら幅960px)
  3. 横スクロールを見る: 横書きの文章の部分が、横にスクロールしなくても、全部読めて使えるかを確かめます
  4. 消えた内容を探す: 広い幅で見えていた内容が、下に並び直したり、開くと見える場所に移ったりして、どれも使えるかを確かめます
  5. 例外の範囲を見る: 表や地図で横に送る部分があるときは、その部分の中だけで済んでいるかを確かめます

試した結果

架空のページ(本文と補足の欄、幅1200pxの画像、6列の表)で、上のCSSを当てる前と後を、幅320pxの枠の中で比べました。

  • 当てる前(欄の幅を固定し、画像の幅も指定しない作り)は、画像が元の幅1200pxのまま残り、ページの幅が1208pxになって、横スクロールが出ました
  • 当てた後は、ページの幅が320pxに収まり、補足の欄は本文の下に回りました
  • 画像は欄の幅に合わせて縮み、縦横の比は変わりませんでした
  • 表は囲んだ中だけが横に送れる状態で、ページの幅は320pxのままでした
  • 幅1280pxの枠では、本文と補足が横に並びました

試したのは Mac の作業PCの Google Chrome 155(ヘッドレス)です。画面の拡大の機能ではなく、幅320pxの枠(iframe)の中に表示して測っています。

自分で直すか、相談するかの判断

判断の目安は、「横スクロールの原因が、CSSの幅の指定だけで直せるか」です。欄や画像の幅を固定している指定を、上の例のように直せば済むなら、自分で直して、もう一度手順で確かめます。

ページの作りそのものを変える必要があるとき(固定の幅を前提にした大きな部品、2つの向きに広がる操作の画面など)は、サイトを作った人やWebデザインの講師と相談してから直します。どの部分を例外として扱うかも、自分だけで決めずに確かめておくと安心です。

つまずきやすいところ

  • 狭い画面で欄を消すだけにする: 失敗例F102では、幅320pxにしたときに、広い画面で見えていた内容(横の欄のリンク、検索の欄、情報を伝える画像など)が消えて使えなくなることを失敗としています
  • 入力欄の見出しを薄い見本の文字に置き換える: F102には、狭い画面で入力欄の上の見出しを隠し、欄の中の見本の文字(placeholder)だけにする例も挙げられています
  • 表があるからとページ全体を横に送る: 例外は表の部分だけです。表を囲まずに置くと、表の後の文章まで横に長くなることがあります
  • 並べ替えで読む順番を変える: 技法C32の注記では、グリッドで見た目の順番をHTMLの順番と変えると、キーボードで操作する人の移る順番がおかしくなると注意しています
  • 文字の拡大と混ぜて確かめる: 文字だけを200%に大きくする場合の確かめ方は、Webデザインで文字の大きさと行間を決める方法で紹介しています
  • 拡大した状態でボタンの大きさを測る: ボタンの押しやすい大きさは、拡大していない状態で確かめます。方法は、Webデザインでボタンやリンクの押しやすい大きさを決める方法にまとめています

まとめ

  • WCAGの達成基準1.4.10は、幅320 CSSピクセル相当で、縦と横の両方のスクロールなしに読めて使えることを求めています
  • 幅を狭めたら欄を1列に並べ直し、画像と動画はmax-widthで欄の幅に収めます
  • 表や地図など、横の並びが要る部分だけは、その部分の中でスクロールさせます
  • 狭い画面で内容を消さず、幅1280pxを400%に拡大して確かめます