メインコンテンツへスキップ
Code & Craft
Web制作 約7分で読めます

HTML popover属性 完全ガイド｜JSなしで作るモーダル・トーストの新常識【2026年版】

HTML popover属性の使い方を実例付きで解説。モーダル、ツールチップ、メニューをJavaScriptなしで実装する方法とアクセシビリティ対応を完全網羅。

2024年から主要ブラウザで使えるようになった HTML popover 属性 は、モーダル・ドロップダウン・ツールチップを JavaScript なしで実装できる革新的な機能です。アクセシビリティも標準で担保されており、2026年現在では本番投入に十分な成熟度に達しています。

popover 属性とは

popover 属性を要素に付けるだけで、その要素は「ポップオーバー」として扱われます。ブラウザが自動的に以下を処理します。

  • 最前面への表示（top-layer 使用）
  • キーボードアクセシビリティ（Esc キーで閉じる）
  • 外側クリックで自動クローズ
  • フォーカストラップ
<button popovertarget="my-popover">開く</button>

<div id="my-popover" popover>
  <h2>ポップオーバーの中身</h2>
  <p>これは popover 属性だけで実装されています。</p>
</div>

たったこれだけで、ボタンクリックでポップオーバーが開き、Escキーや外側クリックで閉じる動作が実現されます。

popover の2つのモード

auto モード（デフォルト）

popover または popover="auto" を指定すると、以下の動作になります。

  • 外側クリックで自動的に閉じる
  • Esc キーで閉じる
  • 他の auto ポップオーバーを開くと閉じる（「light dismiss」）

メニュー・ドロップダウン・通知など、気軽に閉じたいUIに最適です。

manual モード

popover="manual" を指定すると、明示的な操作でのみ閉じることができます。

<div id="toast" popover="manual">
  保存しました！
</div>

<script>
  const toast = document.getElementById('toast');
  toast.showPopover();
  setTimeout(() => toast.hidePopover(), 3000);
</script>

自動で消えるトースト通知や、ステップガイドなど、ユーザーの意図しないタイミングで閉じたくない場合に使います。

ブラウザ対応状況（2026年4月）

ブラウザサポート
Chrome 114+完全サポート
Edge 114+完全サポート
Safari 17+完全サポート
Firefox 125+完全サポート

主要ブラウザすべてで使用可能です。IE 11等のレガシーブラウザを考慮する必要がない現在、実用的な選択肢となっています。

実践パターン

モーダルダイアログ

<button popovertarget="confirm-modal">削除</button>

<div id="confirm-modal" popover class="modal">
  <h2>本当に削除しますか？</h2>
  <p>この操作は取り消せません。</p>
  <div>
    <button popovertarget="confirm-modal" popovertargetaction="hide">
      キャンセル
    </button>
    <button onclick="doDelete()">削除する</button>
  </div>
</div>

<style>
.modal {
  padding: 2rem;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.modal::backdrop {
  background: rgba(0,0,0,0.5);
}
</style>

::backdrop 擬似要素で背景のオーバーレイもスタイリングできます。これも CSS だけで実現できる点が画期的です。

ドロップダウンメニュー

<button popovertarget="menu">メニュー ▼</button>

<ul id="menu" popover class="dropdown">
  <li><a href="/profile">プロフィール</a></li>
  <li><a href="/settings">設定</a></li>
  <li><a href="/logout">ログアウト</a></li>
</ul>

外側クリックで自動的に閉じるため、ドロップダウン実装にありがちな「閉じるロジック」を書く必要がありません。

ツールチップ

<button popovertarget="help-tip" popovertargetaction="show">?</button>
<div id="help-tip" popover="manual" class="tooltip">
  パスワードは8文字以上、英数字を含めてください
</div>

onmouseenter / onmouseleave で showPopover() / hidePopover() を呼ぶことで、ホバーツールチップも実装できます。

popovertarget 属性の仕様

ボタンに popovertarget を付けると、クリック時に対応する popover を開閉します。

属性動作
popovertarget="id"トグル（開いてたら閉じる、閉じてたら開く）
popovertargetaction="show"強制的に開く
popovertargetaction="hide"強制的に閉じる
popovertargetaction="toggle"トグル（デフォルト）

アクセシビリティ対応

popover は標準でアクセシビリティが考慮されています。

  • 自動的な role 設定: role="dialog" 等が推奨されます
  • キーボードナビゲーション: Esc キーで閉じる
  • フォーカス管理: 開いた時に内部要素にフォーカスが移動
  • スクリーンリーダー対応: 状態変化が読み上げられる

ただし、より良い体験のために以下の属性を明示的に付けることが推奨されます。

<div
  id="modal"
  popover
  role="dialog"
  aria-labelledby="modal-title"
  aria-describedby="modal-desc"
>
  <h2 id="modal-title">確認</h2>
  <p id="modal-desc">削除してもよろしいですか？</p>
</div>

CSS での制御

:popover-open 擬似クラスで、開いている状態のスタイルを定義できます。アニメーションも可能です。

[popover] {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s, transform 0.2s, overlay 0.2s, display 0.2s;
  transition-behavior: allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.9);
  }
}

transition-behavior: allow-discrete と @starting-style により、display: none からのアニメーションも実現できます。

JavaScript API

プログラムから制御する場合の API です。

const popover = document.getElementById('my-popover');

// 開く
popover.showPopover();

// 閉じる
popover.hidePopover();

// トグル
popover.togglePopover();

// 開閉イベント
popover.addEventListener('toggle', (event) => {
  console.log(event.newState); // 'open' or 'closed'
});

との違い

HTML には以前から <dialog> 要素がありましたが、popover と使い分けるべきです。

項目<dialog>popover
用途モーダルダイアログ汎用ポップオーバー
外側クリックデフォルトでは閉じない閉じる
Esc キー閉じる閉じる
modal 状態ありなし
モードmodal / non-modalauto / manual

使い分けの基準:

  • ユーザー操作をブロックしたいモーダル → <dialog>
  • 軽量なポップアップ・メニュー → popover

まとめ

HTML popover 属性により、これまで数十行の JavaScript を必要としていたモーダルやメニューが、わずか数行のHTMLで実装できるようになりました。

導入のメリット:

  • JavaScript の削減
  • アクセシビリティの自動担保
  • メンテナンスコストの低減
  • 一貫したユーザー体験

まずは既存プロジェクトのツールチップやドロップダウンから置き換えてみてください。標準機能の恩恵を最大限に活用しましょう。

参考リンク

#HTML #CSS #アクセシビリティ #モーダル #Web API
シェア:

関連記事

Web制作

Astro Prerenderで動的ルートを完全静的化する方法｜SSG+動的パスでSEO最大化【2026年4月最新】

Web制作

Astro Hybrid Rendering vs SSR どっちを選ぶ【パフォーマンス比較】

Web制作

Next.js 15 Server Actions のエラーハンドリング実装｜フォームバリデーション・非同期処理の正解【2026年最新】

← 記事一覧に戻る