メディアクエリとグリッド CSS を使用して列をリフローする

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

カスケーディングスタイルシート (CSS) をサポートしているウェブコンテンツ技術。

この達成基準は、達成基準 1.4.10: リフロー (十分) に関連する。

解説

この達成方法の目的は、320 CSS ピクセルに相当する幅の横スクロールバー、又は水平にスクロールするテキストに対して 256 CSS ピクセルに相当する高さの縦スクロールバーを導入せずにコンテンツを表示できるようにすることである。これは、使用可能なビューポートに適応するレイアウト手法を使用して行われる。

グリッドレイアウトは、必要に応じリフローして領域を画面に表示するためのレイアウトを定義する。したがって、厳密なレイアウトは異なるが、正しく指定された場合の要素の関係と読み取り順序は同じままである。これは、異なるコンテンツサイズ設定のある、さまざまなデバイス上で及び利用者に対して適切に提示するデザインを作成するための効果的な方法である。

グリッドレイアウトの基本原則は次のとおり:

  1. 特定のビューポートサイズにおいて、グリッドプロパティ及びメディアクエリを使用してレイアウト領域のサイズを定義し、利用可能なスペースで拡大、縮小又は内包し、ズームレベルに応答する。
  2. グリッドコンテナ内のレイアウト領域を隣接するグリッドアイテムの行として配置する。これは段落の折り返しの単語とほぼ同じ方法で、必要に応じて新しい行に折り返してよい。
注記

グリッドレイアウト CSS を使用すると、視覚的なレイアウトとソースコードの順序が異なることで、キーボードナビゲーションの分断が生じる場合がある。キーボード利用者及びその他利用者に不正確なフォーカス順序をもたらすため、 CSS Grid Layout Module Level 1 ではグリッドアイテム配置によるコンテンツの並べ替えについて警告している。

事例

事例 1: HTML 及び CSS でのグリッドレイアウト - 中程度の複雑さ

次の中程度の複雑さの例では、 HTML 及び CSS を使用してグリッドレイアウトを作成する。ビューポートが調整されると、レイアウト領域のサイズも調整される。ビューポートの合計幅がメディアクエリで定義された幅と一致する場合、列は折り返され、互いに隣接するのではなく下に配置される。

複数の方向にスクロールする必要なく、ズームレベルを 400 ％に上げられる。特にこの例では "grid-template-columns" プロパティを使用し、グリッドアイテムのグリッドコンテナにおける空き領域の比率として fr 単位を用い、ソース順にレイアウトする。 


  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>CSS: Using media queries and grid CSS to reflow columns</title>
        <style>

        /* Reflow Styling */
        header[role="banner"]       { grid-area: header; }
        main[role="main"]           { grid-area: main; }
        aside[role="complementary"] { grid-area: aside; }
        footer[role="contentinfo"]  { grid-area: footer; }

        .grid,
        .subgrid {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
        }

        .grid {
          grid-template-areas:
          'header'
          'main'
          'aside'
          'footer';
          width: 100%;
        }

        .subgrid {
          width: calc(100% + 2rem);
          margin: 0 -1rem;
        }

        .grid-item,
        .subgrid-item {
          padding: 1rem;
        }

        @media all and (min-width: 576px) {
          .subgrid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            margin-bottom: 1rem;
          }
          .subgrid-item {
            padding-bottom: 0.25rem;
          }
        }

        @media all and (min-width: 992px) { 
          .grid {
            grid-template-areas:
              'header header header'
              'main main aside'
              'footer footer footer';
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
          }
        }

        </style>

      </head>

      <body class="grid">

        <header role="banner" class="grid-item">
          ...
        </header>

        <main role="main" class="grid-item">        
          ...
          ...
          <div class="subgrid">
            <div class="subgrid-item">
              ...
            </div>
            <div class="subgrid-item">
              ...
            </div>
          </div>
        </main>

        <aside role="complementary" class="grid-item">
          ...
        </aside>

        <footer role="contentinfo" class="grid-item">
          ...
        </footer>

      </body>
    </html>

動作例: Using media queries and grid CSS to reflow columns

関連リソース

リソースは情報提供のみを目的としており、推奨を意味するものではない。

検証

手順

  1. 400 ％のズームが可能なユーザエージェントでウェブページを表示し、ビューポートサイズ (CSS ピクセル単位) を幅 1280、高さ 1024 に設定する。
  2. 400 ％にズームする。
  3. 水平方向に読むコンテンツの場合、すべてのコンテンツと機能が横スクロールせずに利用できることを確認する。
  4. 垂直方向に読むコンテンツの場合、すべてのコンテンツと機能が縦スクロールせずに利用できることを確認する。
注記

ブラウザで 400 ％にズームできない場合、比例的にブラウザ幅又は高さを減らせる。例えば 300 ％にズームする場合、ビューポートサイズを 960 px 幅にすべきである。

期待される結果

3.及び 4.の結果が真である。