HTMLのpopover属性の基本的な使い方とデザイン

HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。

ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input type="button"> に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。

開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。

popover｜MDN Web Docs｜Mozilla

ボタンとコンテンツをpopover属性で連携させることによってボタンを押したときにコンテンツをポップアップとして「最上位レイヤー内の他のすべての要素の上に」表示させることができる。HTMLだけで、JavaScriptやCSSなしに、直接、ポップアップを使えるようになった。popover属性の使い方についてサイト作成

popover属性のポップアップはコンテンツのCSSのdisplayの値をnone（非表示）にして対応するボタンを押したときにnoneを外して表示させる。このとき、ポップアップになって初期値では画面の真ん中に表示されるのがpopover属性ならてはの特徴で、コンテンツはサイトのどこに記載されていても構わず、デザインのCSSを変更しないかぎり、画面の真ん中にしか出ない。ボタンとコンテンツを連携させるpopover属性を入れたHTML要素はサイトのポップアップとして表示されるものになる。popover属性のボタンに使えるHTML要素はbuttonとtype-buttonを付けたinputの二つだけということに注意しなくては行けない。その他のHTML要素、divやpやspanなどをpopover属性のコンテンツと連携させてもポップアップのボタンとして使うことはできない。コンテンツ側に必要なマークアップ

popover id="コンテンツのID"

ボタン側に必要なマークアップ

popovertarget="コンテンツのID"

※コンテンツのIDは任意。popover属性を使うにはコンテンツ側にpopoverとidを記載してさらにボタン側にコンテンツ側のidの値を入れたpopovertargetを記載してそれぞれをポップアップとボタンとして連携させる。popover属性はPopover APIの一環で、その他にも様々な使い方が可能だし、JavaScriptで動作を制御することもできる。popover属性のポップアップの実装例ポップアップ※ボタンを押すと「HTMLのp要素に／popover属性を付けた／コンテンツ」が画面の真ん中に表示される。コンテンツのHTML

<p popover id="poc">HTMLのp要素に<br>popover属性を付けた<br>コンテンツ</p>

ボタンのHTML

<button popovertarget="poc">ポップアップ</button>

popover属性のコンテンツは連携したボタンによって「最上位レイヤー内の他のすべての要素の上に」表示されるからサイトのどこに記載していても結果は変わらない。コンテンツに閉じるボタンを追加する閉じるボタン付きのポップアップ※ボタンを押すと「HTMLのdiv要素に／popover属性を付けた／コンテンツ」が画面の真ん中に表示される。popover属性のコンテンツは初期値でサイズの指定がCSSのwidthとheightの両方ともfit-contentになっていて十分に広がる。だからコンテンツが大きいと画面全体を覆い尽くして閉じられなくなってしまうことがある。ポップアップをデザインで画面よりも小さくすれば周りの隙間を押して閉じられるけど、もう一つの方法としてポップアップに閉じるためのボタンを入れておくとポップアップが画面全体に広がっても大丈夫だし、それでなくとも利便性が高いかも知れない。コンテンツ内の閉じるボタンに必要なマークアップ

popovertarget=°コンテンツのID° popovertargetaction="hide"

通常の開くボタンと考え方は同じで、コンテンツとpopovertarget属性で、連携させることが第一条件になる。さらにpopovertargetaction属性を非表示のhideの値で記載すると押したときに連携したコンテンツを閉じることができる。コンテンツ内の閉じるボタンのサンプルのソースコード

<div popover id="poc">
<p>HTMLのdiv要素に<br>popover属性を付けた<br>コンテンツ</p>
<button popovertarget="poc" popovertargetaction="hide">閉じる</button>
</div>

popovertargetaction属性はポップアップのボタンの開閉を指定できるので、開けたいときは「show」、切り替えたいときは「toggle」（初期値）を入れる。コンテンツ外のボタンでもpopovertargetaction-hideを入れると閉じるボタンとして使うことができる。popover属性のデザインについてサイトデザイン

popover属性のポップアップの初期値のデザインのCSSは次のようになっている。

[popover] {
position:fixed;
inset:0;
width:fit-content;
height:fit-content;
margin:auto;
border:solid;
padding:0.25em;
overflow:auto;
color:CanvasText;
background-color: Canvas}

CSSを上書きすればデザインを変更することができる。

関連ページ

CSSはどう使えば良いのか｜タグ自体とidとclassの指定先とstyleタグとインラインの記述法

popover属性のデザインのためのセレクター

[popover]

popover属性を持つ要素のデザインを記載できる指定。

記載例＿p[popover]

:popover-open

ポップアップが開いたときのデザインを記載できる疑似要素。

記載例＿p:popover-open

::backdrop

ポップアップが開いたときの背景のデザインを記載できる疑似クラス。

記載例＿p::backdrop

popover属性のコンテンツは通常では非表示なので、どんなデザインが付いていても分からない。開いたときにどうするかで、「:popover-open」と「::backdrop」という二つのセレクターが用意されているので、使うと役立つ。popover属性の位置決めの方法popover属性のデザインで重要なのはposition:fixedが使われていることで、位置決めが特殊なので、注意しないと崩れてしまうかも知れない。初期値でポップアップが画面の真ん中に来るのは次の三つのマークアップに基づく。

position:fixed

inset:0

margin:auto

ポップアップは初期値ではコンテンツに合わせて可変して画面からはみ出したらスクロールボックスに変わる。小さくしたいとき、またはサイズを固定したいときにはwidthやheightを上書きすれば良い。レスポンシブデザインのレイアウトポップアップは初期値で画面全体まで広がる可能性があるので、スマホだと多少のコンテンツでも画面一杯になって閉じられなくなることに注意する必要がある。コンテンツ内に閉じるボタンを付けても良いし、デザインで対応するならばポップアップの周りに隙間を残しておく。ポップアップの周りに隙間を付けるCSSpopover属性コンテンツに通常のmargin（外側の余白）を使うと画面の真ん中からずれてしまうので、初期値のposition:fixedを想定して上下左右から離すことで、ポップアップの周りの隙間を確保することができる。

top：上からの距離

right：右から距離

bottom：下からの距離

left：左からの距離

CSSのposition:fixedがかかったコンテンツの場合は画面を基準として上下左右の位置を指定する。もう一つの方法として横幅や縦幅を画面よりも小さく指定することでもポップアップに隙間を付けることができる。

width：コンテンツの横幅

height：コンテンツの縦幅

それぞれの値を「%」（表示領域に占める割合）や「vw」（表示領域に対する横幅の割合）や「vh」（表示領域に対する縦幅の割合）の単位で記載すると画面全体を100とする相対値でサイズを指定できるから何れも100以下で記載すればポップアップがどんなに大きくなっても画面からはみ出すことはなくなる。ポップアップは上下左右から離す方法でもサイズを画面よりも小さくする方法でも周りに隙間を付けることができる。スマホやタブレットだと画面の横幅一杯を使うから、丁度、良いかも知れないけど、しかしパソコンだと広がり過ぎるかも知れないので、併せてmax-width（最大の横幅）やmax-height（最大の縦幅）をpxやemなどの大きさの確定した単位で指定するとサイズを適度な範囲に抑えることもできる。サイズを指定する場合、min()関数を使うと通常のサイズと最大のサイズを同時に記載できるから便利だ。ポップアップの相対的なレイアウトのCSSポップアップを画面の真ん中ではなく、ボタンの近くに表示させるデザインも良く見かける。popover属性のコンテンツはCSSのpositionの値をfixedからabsoluteなどに上書きすることによって親ボックスを基準とした相対的なレイアウトが可能になるけど、ところがポップアップの親ボックスをrelativeで作っても、全体、上手く行かない。調べると「親要素の position や overflow のスタイル付けの影響を受けません」という性質から画面全体を基準とした位置取りしか基本的にできないんだ。現状、相対的なレイアウトの方法としてはJavaScriptで表示位置を算出するしかないみたいだ。

Positioning anchored popovers

または従来通りの方法を使う方が簡単かも知れない。

CSSだけでポップアップを作る

CSSでポップアップウィンドウを表示する

初心者も上級者も必見！CSSポップアップ表示の10の秘訣

今後、可能になりそうなものとしてCSSのAnchor Positioningが考えられている。これはpopover属性の相対的なレイアウトを可能にするもので、コンテンツとボタンをそれぞれのidとpopovertargetで連携するのと同じように親ボックスとコンテンツをidとanchorで連携する。するとポップアップの位置取りを親ボックスを基準としてCSSで行うことができるようになる。ブラウザの実装状況（CSS Anchor Positioning）は皆無なので、使えないけれどもpopover属性の使い途をさらに広げるから使えるようになることを楽しみに待ちたい。HTMLのp要素に
popover属性を付けた
コンテンツ