いよいよ明日 （2024 年 12 月 24 日） は 「できるポケット HTML&CSS 全事典 改訂 4 版」 の発売日なのですが、発売日直前ということで、今回の改訂で前書 （改訂 3 版） 執筆時から仕様が変更されたり、ブラウザのサポートが進んだりした関係で、最新版 （改訂 4 版） で修正したり、加筆した部分について、そのいくつかを紹介してみようと思います。
この記事では、HTML Standard の更新により、グローバル属性 （すべての要素に指定可能な属性のこと） に追加された、popover 属性って知っていました？ というお話を。この属性を使用することで、JavaScript を使用しなくても簡単にポップオーバーする要素を作成することができます。
なお、書籍については下記をご参照ください。
popover 属性とポップオーバー要素
まず、ポップオーバー要素というのは、特定の条件で呼び出されるまで画面上には表示されず（display: none; 状態）、例えば HTMLElement: showPopover() メソッドなどで呼び出され、表示された際には、最上位レイヤーにあるの他のすべての要素の上に表示され、かつ親要素の position や overflow プロパティの影響を受けない要素のことです。
dialog 要素でも同様の実装が可能ですが、dialog 要素がモーダル（その要素が表示されている間、他の要素は反応しない）表示のコンテンツを生成するのに対して、popover 属性が付与された要素は、非モーダル（その要素が表示されている間も他の要素は反応する）であることが異なります。
dialog 要素は、ダイアログボックス （ユーザーに情報を提示し、必要に応じて応答してもらうための特殊ウィンドウの一種） を表示するためのものです。ポップアップするからといって、コンテキストメニューやツールチップを dialog 要素で実装することは望ましくありません。その場合は、popover 属性を使用するのが妥当でしょう。
なお、アクセシビリティ・セマンティクスのない要素 （たとえば div 要素） でポップオーバーを使用する場合、適切な WAI-ARIA 属性を使用して、ポップオーバーが支援技術からアクセス可能であることを確認する必要があります。
popover 属性の使い方
指定可能な属性値は下記の通り。値が省略された場合は auto として扱われますので、popover と指定しても、popover="auto" と指定しても同じ意味になります。
| 属性値 | 概要 |
|---|---|
auto |
初期値。このポップオーバー要素を開くと、他のポップオーバー要素を閉じます。また、他のポップオーバー要素からの閉じるリクエストに応答します。つまり、複数のポップオーバー要素にこの値のみが与えられている場合、排他的処理が実現できます。 |
manual |
このポップオーバー要素を開いたとき、他のポップオーバー要素を閉じず、他のポップオーバー要素からの閉じるリクエストにも応答しません。 |
また、関連する属性として、以下の 2つがあります。
- popovertarget 属性
- popovertargetaction 属性
これら 2 つの属性と組み合わせることで、下記のように HTML を記述するだけで、「メニューを開く」 ボタンを押すと、メニューがポップオーバーして表示される UI を簡単に作成できます （ここではメニューっぽくしていますが、ツールチップのような UI にも向いていると思います）。
<button popovertarget="menu">メニューを開く</button>
<div id="menu" role="menu" popover>
<h2>メニュー</h2>
<ul>
<li><a href="#">メニュー01</a>
<li><a href="#">メニュー02</a>
<li><a href="#">メニュー03</a>
</ul>
<button popovertarget="menu" popovertargetaction="hide">メニューを閉じる</button>
</div>
popovertarget 属性
popovertarget 属性は、そのボタンがトグル、表示、または非表示のターゲットとするポップオーバー要素を指定します。つまり、popover 属性が付与された要素の id 属性値を指定して、「この要素をポップオーバーさせますよ」 と指定するわけですね。
popovertargetaction 属性
もうひとつの popovertargetaction 属性は、操作対象とするポップオーバー要素がトグルされるか、表示されるか、非表示にされるか、といったボタンの役割を示します。
ポップオーバーする要素を操作するボタンに付与しますが、前述したサンプルソースでは、「メニューを閉じる」 ボタンに popovertargetaction="hide" を指定していますので、このボタンは操作することで、ポップオーバー要素を非表示にすることができます。
popovertargetaction 属性に指定可能な値は下記の通りですが、初期値が toggle ですので、この属性を指定しない場合、操作するたびに表示と非表示が切り替わるボタンになります （上記サンプルソースだと 「メニューを開く」 ボタンが該当）。
| 属性値 | 概要 |
|---|---|
hide |
表示されているポップオーバー要素を非表示にします。ターゲットとなるポップオーバー要素がすでに非表示の場合は何もしません。 |
show |
非表示のポップオーバー要素を表示します。ターゲットとなるポップオーバー要素がすでに表示されている場合は何もしません。 |
toggle |
初期値。ポップオーバー要素の表示・非表示を切り替える（トグルする）ボタンとします。 |
この属性を覚えておくだけで、わざわざ JavaScript を書かなくても、HTML と CSS だけでポップオーバーする要素を簡単に実装できます。
現時点ですべてのモダンブラウザはここで紹介した 3 つの属性をサポート済みですので、ぜひ試してみてください。
なお、書籍に関してここは少し心残りで、ページ数と掲載スペースの都合上、ここで挙げた 3 つの属性については、サンプルソースを掲載したりといった細かい説明ができませんでした。なので、本文だけ読むと、じゃあ具体的にどう使うの？ というのがわかりにくく、ここは紙面の都合とはいえ申し訳ない部分です。
書籍を購入された方が、この記事を読んでいただけるとよいのですが。
ということで、現時点で最新の仕様に基づいて改訂された 「できるポケット HTML&CSS 全事典 改訂 4 版」 は、2024 年 12 月 24 日発売。現在予約受付中ですので、もし気になった方はチェックしてみていただければ幸いです。
ご購入（ご予約）はこちらから
Amazon をはじめ、下記のオンラインショップでも予約できるようなのでリンクを掲載しておきます。その他、全国の書店さんでも注文可能だと思いますのでお近くの書店さんにご確認ください。
学校や会社でご購入いただく皆さまへ
学校で HTML や CSS をカリキュラムとして教えていらっしゃる講師の方、あるいは教科書採用のご担当者様、または Web サイト制作会社など、日常的に HTML / CSS を扱う会社の福利厚生の一環としてなど、一括購入のご予定がございましたら、下記の窓口から一度お問い合わせいただければと思います。
今月24日に発売される最新著書 『できるポケット Web制作必携 HTML&CSS全事典 改訂4版』 の見本誌が編集部さんから届いたので開封の儀。結局前書（改訂3版）から約130ページも増えて、720ページになりました。圧倒的分厚さ。鈍器としても使用可能 pic.twitter.com/gHger4msq3
— Yoshiki Kato (@burnworks) December 13, 2024
前書（改訂3版）と厚さ比べしてみたけど、130ページも増えるとさすがに結構厚みが違う。ちなみに編集部さんが最初に予定してたのは672ページ（それでも前書から80ページ増）でしたが、わたくしが「これも載せろ」「これは外せん」などとわがままを言った結果、こんなことになりました pic.twitter.com/GfhV3XVzSi
— Yoshiki Kato (@burnworks) December 13, 2024
