【デザイン基礎】モダンWeb開発のゲームチェンジャー：Top layer APIが変えるUI実装の未来

このとき、ブラウザは以下の処理を自動的に実行します。
1. 要素を最前面（Top layer）に配置する。
2. 背景に「バックドロップ（::backdrop）」を生成する。
3. ページのスクロールを抑制する。
4. キーボードフォーカスをダイアログ内に閉じ込める（トラップ）。

これらは従来、数百行のJavaScriptとCSSで実装していた機能です。これらをブラウザネイティブに委ねることで、コードの保守性は飛躍的に向上します。

サンプルコード：Dialogによる現代的なモーダル実装

以下は、Top layerを活用した最もシンプルで堅牢なモーダル実装例です。

<!-- HTML -->
<button id="open-btn">モーダルを開く</button>

<dialog id="my-dialog">
  <h2>タイトル</h2>
  <p>これはTop layerで制御されたモーダルです。</p>
  <button id="close-btn">閉じる</button>
</dialog>

<style>
  /* 背景のスタイル制御 */
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }
  
  /* ダイアログ本体のスタイル */
  dialog {
    border: none;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  }
</style>

<script>
  const dialog = document.getElementById('my-dialog');
  const openBtn = document.getElementById('open-btn');
  const closeBtn = document.getElementById('close-btn');

  openBtn.addEventListener('click', () => {
    dialog.showModal(); // ここでTop layerに昇格
  });

  closeBtn.addEventListener('click', () => {
    dialog.close(); // Top layerから除外
  });
</script>

Pop-over API：Top layerの応用範囲を広げる

`