Skip to content

テクニック C43:CSS の scroll-padding を用いてコンテンツを隠さないようにする

このテクニックについて

このテクニックは下記に関連する:

このテクニックは、CSS をサポートするすべての技術に適用される。

解説

このテクニックの目的は、固定位置コンポーネントによって初めは完全に隠れているユーザインタフェース コンポーネント（例: リンク、ボタン、フォームフィールド）に、利用者が確実にアクセスできるようにすることである。この例では、CSS の padding プロパティ及び scroll-padding プロパティを使用して、サイトフッターの下にスペースを作成し、キーボードでフォーカスされたときにフッター内のリンクがスクロールして表示されるようにすることで、この目的を実現している。

事例

事例 1: CSS scroll-padding を用いてコンテンツを隠さないようにする

この例では、画面下部に固定位置バナーが存在し、リンクを含むサイトフッターが隠れている状況を示している。このタイプの固定位置バナーは、Cookie 同意バナーでよく使用されるデザインである。

動作例: Using CSS scroll-padding to un-obscure content.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Using CSS scroll-padding to un-obscure content</title>
  <style>
    ...

    :root{
      --height-dialog: 400px;
      --breathing-room: 20px;
      --scroll-padding: calc(var(--height-dialog) + var(--breathing-room));      
    }

    .wrapper {
      display:grid;
      gap:1rem;
      grid-template-columns:repeat(9, 1fr);
      grid-template-rows:8rem auto minmax(10rem, max-content);
      min-block-size: 100vh;
    }

    .wrapper > * {
      border:1px solid var(--black);
      padding:1rem;
    }

    header {
      grid-column:1 / -1;
      grid-row:1;
    }

    main {
      grid-column:1 / 8;
    }

    aside {
      grid-column:8 / 10;
    }

    footer {
      grid-column:1 / -1;
    }

    @media (max-width:50rem) {
      main {
       grid-column:1 / -1;
      }

      aside {
        grid-column:1 / -1;
      }
    }

    .fixed-position-banner {
      background:var(--banner-background);
      border:3px solid var(--banner-border);
      margin-block-end:0.5rem;
      padding:1rem 1rem 5rem;
      position:relative;
      width:calc(100vw - 1rem);
    }

    @media (min-width: 50rem) {
      html {
        padding-bottom:var(--height-dialog);
        scroll-padding-bottom:var(--scroll-padding);
      }

     .fixed-position-banner {
        margin-block-end:0;
        position:fixed;
        inset:auto 0 0 0;
      }
    } 
    ...
  </style>
</head>
<body>
  <dialog class="fixed-position-banner">
    <h2 tabindex="-1">Fixed-Position Banner</h2>
    <button aria-label="close fixed-position banner" class="close-banner" type="button">
      ...
    </button>
  </dialog>
  <div class="wrapper">
    <header>
      <p>Header Content</p>
    </header>
    <main>
      <h1>Main Content</h1>
    </main>
    <aside>
      <h2>Sidebar Content</h2>
      <p><a href="https://example.com">Here's an example link in the sidebar</a>.</p>
    </aside>
    <footer>
      <h2>Footer Content</h2>
      <p><a href="https://example.com">Here's an example link in the footer</a>.</p>
    </footer>
  </div>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const elFixedBanner = document.querySelector('dialog');
      const elCloseBannerBtn = document.querySelector(".close-banner");

      elFixedBanner.show();

      const getDialogHeight = () => {
        const height = elFixedBanner.offsetHeight;
        document.documentElement.style.setProperty('--height-dialog', `${height}px`);
        document.documentElement.style.setProperty('--breathing-room', `${height ? 20 : 0}px`);
      }

      const observer = new ResizeObserver(getDialogHeight);
      observer.observe(elFixedBanner);

      elCloseBannerBtn.addEventListener("click", function(e){
        elFixedBanner.close();
      }, false);
    });
  </script>	
</body>
</html>

関連リソース

推奨を意味するものではない。

  1. W3C - CSS padding.
  2. W3C - CSS the scroll-padding property.

検証

手順

キーボードフォーカスを受け取ることができる各ユーザインタフェース コンポーネントについて:

  1. キーボードフォーカスを受け取ったときに、ユーザインタフェース コンポーネントが完全に隠れていないことをチェックする。
  2. キーボードフォーカスを受け取ったときに、ユーザインタフェース コンポーネントのどの部分も隠れていないことをチェックする。

期待される結果

  • 1 が真である。
  • 隠されないフォーカス (高度) (レベル AAA) の場合、2 も真である。
Back to Top