Documentation CSS

概要

CSSのoverlayプロパティは、トップレイヤーに表示される要素（ポップオーバーやモーダル<dialog>など）が実際にトップレイヤーでレンダリングされるかどうかを指定する、比較的新しいプロパティです。

トップレイヤーとは、通常のドキュメントフローとは別の最上位のレイヤーで、z-indexの影響を受けずに他のすべてのコンテンツより上に表示される特別なレイヤーです。ポップオーバーやフルスクリーン要素、モーダルダイアログなどがここに配置されます。

overlayプロパティの重要な特徴は、ブラウザによってのみ設定される読み取り専用のプロパティであることです。CSSで直接値を変更することはできませんが、transition-propertyに追加することで、要素がトップレイヤーから削除されるタイミングを遅延させ、フェードアウトなどのアニメーションを実現できます。

基本的な構文

/* キーワード値 */
overlay: auto;
overlay: none;

/* グローバル値 */
overlay: inherit;
overlay: initial;
overlay: revert;
overlay: revert-layer;
overlay: unset;

値の説明

値説明
auto要素がトップレイヤーに昇格している場合、トップレイヤーでレンダリングされます
none要素はトップレイヤーでレンダリングされません（初期値）

使用上の重要なポイント

直接設定はできない

overlayプロパティは著者スタイル（開発者が書くCSS）では値を変更できません。このプロパティはブラウザが内部的に管理するものです。

/* これは動作しません */
.my-popover {
  overlay: auto; /* 効果なし - ブラウザのみが設定可能 */
}

トランジションでの使用が目的

overlayの主な用途は、transition-propertyに含めることで、トップレイヤー要素の終了アニメーションを可能にすることです。

.popover {
  /* overlayをトランジション対象に含める */
  transition:
    opacity 0.5s,
    overlay 0.5s allow-discrete;
}

使用例

ポップオーバーのフェードイン・フェードアウト

以下は、Popover APIを使用したポップオーバーに滑らかなトランジションを適用する例です。

<!-- ポップオーバーのトリガーボタン -->
<button popovertarget="my-popover">ポップオーバーを表示</button>

<!-- ポップオーバー本体 -->
<div popover="auto" id="my-popover">
  <p>これはポップオーバーの内容です。</p>
  <p>閉じるにはボタンをクリックするか、外側をクリックしてください。</p>
</div>
/* ポップオーバーが開いている状態 */
[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}

/* ポップオーバーの基本スタイルと閉じた状態 */
[popover] {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* 終了アニメーションの最終状態 */
  opacity: 0;
  transform: scale(0.95);

  /* トランジション設定 */
  /* overlayとdisplayにはallow-discreteが必要 */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    overlay 0.3s allow-discrete,
    display 0.3s allow-discrete;
}

/* エントリアニメーションの開始状態 */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

ダイアログのスライドイン・スライドアウト

モーダルダイアログに対しても同様のアプローチが使えます。

<button id="open-dialog">ダイアログを開く</button>

<dialog id="my-dialog">
  <h2>確認</h2>
  <p>この操作を続行しますか？</p>
  <div class="dialog-buttons">
    <button id="cancel-dialog">キャンセル</button>
    <button id="confirm-dialog">確認</button>
  </div>
</dialog>
/* ダイアログが開いている状態 */
dialog[open] {
  opacity: 1;
  transform: translateY(0);
}

/* ダイアログの基本スタイル */
dialog {
  padding: 24px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 400px;

  /* 終了アニメーションの最終状態 */
  opacity: 0;
  transform: translateY(-20px);

  /* トランジション設定 */
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    overlay 0.4s allow-discrete,
    display 0.4s allow-discrete;
}

/* エントリアニメーションの開始状態 */
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* バックドロップのトランジション */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition:
    background-color 0.4s ease,
    overlay 0.4s allow-discrete,
    display 0.4s allow-discrete;
}

dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

@starting-style {
  dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
}
// ダイアログの制御
const dialog = document.getElementById('my-dialog');
const openBtn = document.getElementById('open-dialog');
const cancelBtn = document.getElementById('cancel-dialog');
const confirmBtn = document.getElementById('confirm-dialog');

openBtn.addEventListener('click', () => {
  dialog.showModal();
});

cancelBtn.addEventListener('click', () => {
  dialog.close();
});

confirmBtn.addEventListener('click', () => {
  // 確認処理
  dialog.close();
});

実装に必要な要素

overlayプロパティを使ったトランジションを正しく動作させるには、以下の要素が必要です。

1. transition-behavior: allow-discrete

overlayやdisplayのような離散型プロパティをトランジションさせるには、allow-discreteキーワードが必要です。

/* ショートハンド記法 */
transition: overlay 0.3s allow-discrete;

/* 個別プロパティ記法 */
transition-property: overlay;
transition-duration: 0.3s;
transition-behavior: allow-discrete;

2. @starting-style ルール

エントリアニメーション（表示されるときのアニメーション）を機能させるには、@starting-styleルールが必要です。これにより、要素が最初に表示されるときの初期スタイルを定義できます。

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    /* 開始時のスタイル */
  }
}

3. display プロパティもトランジション対象に

終了アニメーションを完了するまで要素を表示し続けるには、displayプロパティもトランジションに含める必要があります。

transition:
  opacity 0.3s,
  overlay 0.3s allow-discrete,
  display 0.3s allow-discrete;

overlayの動作の特殊性

overlayプロパティのアニメーションは、通常の離散型アニメーションとは異なる特殊な動作をします。

通常の離散型プロパティ（例：visibility）は、トランジションの50%地点で値が切り替わります。しかし、overlayのauto状態は、開始状態でも終了状態でも、トランジション全期間を通じて表示され続けます。

これにより、要素が非表示になる前に終了アニメーションが完全に再生されることが保証されます。

ブラウザ対応状況

overlayプロパティは比較的新しい機能であり、ブラウザのサポートは限定的です。

ブラウザサポート状況
Chromeバージョン117以降でサポート
Edgeバージョン117以降でサポート
Firefox未対応（実装検討中）
Safari未対応
Operaバージョン103以降でサポート

グローバルな利用率は約75%程度ですが、FirefoxとSafariでは動作しないため、フォールバックの対応が必要です。

フォールバック対応

overlayがサポートされていないブラウザでは、トランジションなしで要素が即座に表示・非表示されます。基本的な機能（ポップオーバーやダイアログの表示・非表示）は維持されるため、プログレッシブエンハンスメントとして使用できます。

/* 基本的なスタイル（すべてのブラウザで適用） */
[popover] {
  opacity: 1;
}

/* 対応ブラウザでのみトランジションを適用 */
@supports (transition-behavior: allow-discrete) {
  [popover] {
    transition:
      opacity 0.3s,
      overlay 0.3s allow-discrete;
  }
}

まとめ

overlayプロパティは、トップレイヤー要素のトランジションを制御するための重要なプロパティです。直接値を設定することはできませんが、transition-propertyに追加することで、ポップオーバーやダイアログの滑らかなフェードイン・フェードアウトを実現できます。

実装時のポイントをまとめると：

  1. overlayは読み取り専用 - ブラウザのみが設定可能
  2. transition-behavior: allow-discreteが必須 - 離散型トランジションを有効化
  3. @starting-styleルールを使用 - エントリアニメーションの定義
  4. displayもトランジション対象に含める - 終了アニメーションを完了まで表示
  5. ブラウザ対応を確認 - Chrome/Edgeでは動作するが、Firefox/Safariは未対応

モダンなUIにおいて、ポップオーバーやダイアログのアニメーションはユーザー体験の向上に大きく貢献します。overlayプロパティを活用して、より洗練されたインターフェースを構築しましょう。

参考文献

円