C34: 固定されていないスティッキーヘッダー/フッターに、メディアクエリーを利用する

適用 (対象)

この達成方法は、カスケーディングスタイルシート／HTML の技術に、適用される。

この達成方法は、達成基準 1.4.10: リフロー (参考) に関連する。

解説

この達成方法の目的は、十分なスペースがあるとき、コンテンツをスティッキーヘッダー及びフッターで表示できるようにすることである。これは、ビューポートの使用可能なスペースに適応する、min-height、max-height、及び min-width メディアクエリー技術を使用することで行われる。

スティッキー領域は常にビューポートに表示されたままになるが、他のコンテンツはスクロール時にその下に消える。コンテンツの視認性の点では、これはデスクトップ及び縦向きのモバイルデバイスでは問題にならないことが多い。ただし、モバイルデバイスを横向きで使用している場合、又は、デスクトップでズームインしている場合は、スティッキー領域が画面の大部分を遮ることがある。つまり、スティッキー領域の高さのために、ページの内容を表示するための画面の一部分だけが残る場合がある。

無効化、つまりスティッキー領域の固定解除は、利用者が異なる読書及びズームの設定を好む場合、又はランドスケープモードを使用する場合、十分な利用可能なスペースを確保するための効果的な方法である。

注記

スティッキー領域は、キーボード利用者にとって不利になる可能性があるため、慎重に使用する必要があることに注意する。固定ヘッダーのあるページをタブで移動するキーボード利用者にとっての問題は、ページがスクロールを開始した後に、ページの上方にあるインタラクティブ要素に到達するために逆方向でタブ移動すると、多くの場合、フォーカスがスティッキーヘッダーの背後に移動した時点で見えなくなることである。そのため、利用者は、フォーカスを見るために上にスクロールしなければならないが、これは必ずしも意識して行っているわけではないだろう。同様に、目に見えるフォーカスはスティッキーフッターの後ろに消えてしまうので、利用者はフォーカスの位置を見るために下にスクロールする必要があり、これは非常に面倒である。

固定されていないヘッダー/フッターの基本的な使い方は、次のとおりである:

メディアクエリーの min-height プロパティを使用して、最初のスティッキー領域を定義する。これにより、使用可能なスペースに応じて固定又は非固定にする。
特定のビューポートサイズのメディアクエリー min-width 及び max-height プロパティを使用して他のスティッキー領域を定義する。これにより、例えばタブレットの場合、デバイスの縦向き又は横向きの位置の使用可能なスペースに応じて固定又は非固定にする。

事例

例 1: HTML 及び CSS でスティッキーヘッダー/フッターを固定しない

次の例では、HTML 及び CSS を使用して、スティッキーヘッダー/フッターの固定を解除している。ビューポートの高さが制限される又は方向が変更されると、スティッキー領域は固定されなくなる。min-height プロパティがメディアクエリーによって定義されたビューポートのスペースに一致する場合、スティッキーでない領域は固定され、その逆も同様となる。この例では、CSS の min-height、max-height、及び min-width メディアクエリープロパティーを使用する。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Using media queries to un-fix sticky headers / footers</title>
    <style>

    /* Sticky Styling */

    header { min-height: 130px; }

    @media (min-height: 480px) {
      header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
    }

    @media (min-device-width: 576px) and (max-device-width: 1024px) and (orientation: landscape) {
      header {
        position: static;
      }
    }

    footer { min-height: 130px; }

    @media (min-height: 480px) {
      footer {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
      }
    }

    @media (min-device-width: 576px) and (max-device-width: 1024px) and (orientation: landscape)  {
      footer {
        position: static;
      }
    }

    </style>

  </head>

  <body class="grid">

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

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

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

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

  </body>
</html>

作業例:CSSフレックスボックスを使用したリフロー

検証

手順

注記

実際のモード又はサイズは、テストする環境によって異なる。

デバイス/ユーザエージェント上のコンテンツを縦向きモードで表示する。
方向を横向きに変更する。
既存のメディアクエリーの設定に応じて、スティッキーヘッダー及びスティッキーフッターが固定解除されるかどうかを確認する。
開始時のビューポートの幅を 1280x1024 CSS ピクセルとし、デスクトップ/ユーザエージェントにコンテンツを表示する。
ビューポートの幅と高さを変更する、又はブラウザのズーム機能を使用する。
既存のメディアクエリーの設定に応じて、スティッキーヘッダー及びフッターが、特定のサイズで固定解除されるかどうかを確認する。

期待される結果

上記3と6の結果が真である。

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。

固定されていないスティッキーヘッダー/フッターに、メディアクエリーを利用する

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

適用 (対象)

解説

事例

例 1: HTML 及び CSS でスティッキーヘッダー/フッターを固定しない

検証

手順

期待される結果