ボタンの横に吹き出しを出す、入力欄の下に候補の一覧を並べる。こうした「ある要素にくっつけて別の要素を置く」配置は、長くJavaScriptで位置を計算して実現するのが定番でした。CSSのアンカー配置(anchor positioning)はこれをCSSだけで書ける仕組みですが、指定の読み書きに慣れるまでが少し大変です。Chrome for Developersが10月20日に公開した開発者ツールの更新情報で、そのとっつきにくさを和らげる機能が紹介されていました。

position-areaを格子で選ぶ編集画面

更新情報によると、Elementsパネルのスタイル欄で、position-areaの宣言の横に小さな見本の印が出るようになりました。これをクリックすると、アンカーの周りを区切った格子が表示され、どの区画に要素を置くかを画面上で選べるとされています。縦と横の軸をまとめて設定することも、片方ずつ設定することもでき、selfキーワードの切り替えや、軸を省いた短い書き方への置き換えにも対応しているそうです。

position-areaは「top center」のように、位置を語の組み合わせで表すプロパティです。考え方自体は素直なのですが、文字だけで見ていると、実際にどこへ出るのかを頭の中で組み立て直す必要がありました。格子をクリックしながら試せれば、指定と見た目の対応を確かめる手間はかなり減りそうです。

同じ更新では、アンカー配置まわりの調べものを助ける変更がほかにも入っています。ポップオーバーに複数の暗黙のアンカーがある場合、DOMツリーの印を右クリックして、関連するアンカー要素へ移れるようになりました。また、アンカー配置された要素の位置の基準になる箱(inset-modified containing block)について、余白や枠線、内容の範囲を画面上の重ね表示で確かめられるとされています。吹き出しが思った場所からずれるときに、原因が指定にあるのか、基準の箱にあるのかを切り分けやすくなるはずです。

このほかElementsパネルでは、Flexboxの編集画面からflex-wrapのwrap-reverseを切り替えられるようになり、効いていない@starting-styleの規則も確認できるようになっています。—theme-colorのように、ダッシュを3本以上重ねて始まるカスタムプロパティも、スタイル欄で確認や編集ができるようになりました。これらはChrome 155と156の安定版に入った開発者ツールの変更としてまとめられています。

中小企業のサイトでも、メニューの補足説明や入力欄の手助けの表示など、アンカー配置が役立つ場面は少なくありません。実際に使う前には、対象にしたいブラウザでの表示を確かめておきたいところです。まずは開発者ツールで格子を触りながら、手元の吹き出しやメニューをCSSだけで置き直せるか試してみると、仕組みの感触がつかみやすいと思います。