コンテンツをリフローするために CSS Flexbox を使用する

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

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

適用 (対象)

カスケーディングスタイルシート (CSS) をサポートする技術を利用したコンテンツ。

この達成方法は、達成基準 1.4.10: リフローに関連する。（十分な達成方法）.

解説

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

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

Flexbox レイアウトの基本原則は以下のとおり:

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

Flexbox では、order プロパティと reverse プロパティを使うことでキーボードナビゲーションの分断を引き起こす可能性がある。不正なソースの順序付けを引き起こし不適合なコンテンツロジックの順序変更を、CSS Flexible Box Layout モジュールは警告する。

事例

事例 1: HTML 及び CSS での中程度の複雑な flexbox レイアウト

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

複数の方向にスクロールする必要なく、ズームレベルを 400％に上げることができる。特にこの事例では、"flex-basis" プロパティを使用してフレックスアイテムのパーセントサイズを使用し、ソース順にレイアウトしている。


  <!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Using CSS Flexbox for Reflow</title>
    <style>

    /* Reflow Styling */

    .row {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
    }

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

    .col {
      padding: 1rem;
      flex: 0 1 100%;
    }

    @media all and (min-width: 576px) {
      .col-panel {
        flex: 0 1 50%;
        padding-bottom: 0.25rem;
      }
    }

    @media all and (min-width: 992px) {
      main[role="main"] {
        flex: 0 1 66.333333%;
      }
      aside[role="complementary"] {
        flex: 0 1 33.333333%;
        margin-top: 0;
      }
    }

    </style>

    </head>

    <body class="row">

      <header role="banner" class="col">
        ...
      </header>

      <main role="main" class="col">
        ...
        ...
        <div class="row row-nested">
          <div class="col col-panel">
            ...
          </div>
          <div class="col col-panel">
            ...
          </div>
        </div>
      </main>

      <aside role="complementary" class="col">
        ...
      </aside>

      <footer role="contentinfo" class="col">
        ...
      </footer>

    </body>
  </html>

動作例: Using CSS Flexbox for Reflow

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

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

ブラウザが 400％にズームできない場合、ブラウザの幅をそれに比例して縮小できる。例えば、300％のズームでは、ビューポートの幅を 960px にすべきである。

期待される結果

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