【HTML】ポップアップを実現するpopoverの使い方
【HTML】ポップアップを実現するpopoverの使い方
「popover属性」を使えば、JavaScriptを使わずに簡単なポップアップ（モーダルやツールチップ）を実装できます。 基本的な使い方からブラウザ対応状況、注意点までをわかりやすく解説します。
popover属性とは？
popover属性は、任意のHTML要素をポップアップとして扱うためのグローバル属性です。この属性を指定した要素は、初期状態で非表示（display: none）となり、指定されたトリガー要素から表示・非表示を制御できます。
サンプル
こんにちは！これはポップアップの内容です。
基本的な構文
<button popovertarget="my-popover">ポップアップを開く</button>
<div id="my-popover" popover>
こんにちは！これはポップアップの内容です。
</div>popovertarget属性：ボタンや入力要素に指定し、対応するポップアップ要素のIDを設定します。popover属性：ポップアップとして機能させたい要素に指定します。
この例では、ボタンをクリックすると、id="my-popover"のdiv要素が表示されます。
popover属性の値と挙動
popover属性には以下の値を指定できます：
auto（デフォルト）：クリックやEscキーで閉じることができ、他のautoポップアップを開くと自動的に閉じます。manual：明示的に表示・非表示を制御する必要があり、ユーザーの操作で自動的に閉じることはありません。hint（実験的）：autoポップアップとは独立して表示され、他のhintポップアップを開くと閉じます。
値を省略した場合、autoと同じ挙動になります。
複数の操作ボタンを使った例
popovertargetaction属性を使うと、ポップアップの表示、非表示、トグル（切り替え）を明示的に指定できます。
<button popovertarget="my-popover" popovertargetaction="show">表示</button>
<button popovertarget="my-popover" popovertargetaction="hide">非表示</button>
<div id="my-popover" popover>
これは手動制御のポップアップです。
</div>この例では、「表示」ボタンでポップアップを表示し、「非表示」ボタンで閉じます。
CSSでのスタイリング
ポップアップの表示状態に応じてスタイルを変更するには、:popover-open疑似クラスを使用します。
[popover] {
padding: 1em;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 8px;
}
:popover-open {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}また、::backdrop疑似要素を使って、ポップアップの背後に半透明の背景を追加することも可能です。
[popover]::backdrop {
background: rgba(0, 0, 0, 0.3);
}ブラウザ対応状況（2025年4月時点）
| ブラウザ | 対応バージョン |
|---|---|
| Chrome | 114以降 |
| Edge | 114以降 |
| Firefox | 125以降 |
| Safari | 17以降 |
| Opera | 100以降 |
| iOS Safari | 17以降 |
| Android Chrome | 114以降 |
最新のブラウザでは広くサポートされていますが、古いバージョンや一部のブラウザでは未対応の場合があります。必要に応じて、JavaScriptによるフォールバックを検討してください。
注意点とベストプラクティス
- アクセシビリティ：
popover属性自体には特定のARIAロールが付与されないため、必要に応じてrole="dialog"やaria-labelledbyなどを追加して、スクリーンリーダー対応を強化しましょう。 - フォーカス管理：ポップアップを開いた際に、適切な要素にフォーカスを移動させることで、キーボード操作のユーザーにも配慮できます。
- 位置調整：デフォルトではポップアップが画面中央に表示されますが、CSSで
positionやinsetプロパティを調整することで、任意の位置に配置できます。