古代魔法の
脚注開発で顕現する
新たな概念
『絆と布陣』 古代魔法Detailsによる
脚注開発でみえてくる最新CSS
Anchor Positioningの新たな概念
『絆と布陣』

今回ご紹介する古代魔導は、『details要素』

• アコーディオンだけでなく脚注にも使える優秀な古代魔法
  どうも、今回も私ジェミパラ・トラッセンダーが古代魔法をご紹介する。
  今回ご紹介するのは『details要素』だ。
  HTMLだけで開閉UIを作ることができる、主にアコーディオン用の特殊なHTML要素である。
  しかし今回はアコーディオンとしてではなく、脚注として取り上げる。
  文章中の文言へ注釈を付け、必要なときだけ表示する。あの脚注である。
  まずはいきなり脚注として紹介する前に、details要素本来の機能をご覧に入れよう。
  
  
  
• details要素の概要
  details要素 は、ユーザー操作によって内容を開閉できるHTML要素だ。
  基本形は非常に単純。
  

  <details>
  <summary>ここをクリックして詳しく見る</summary>
  <p>ここに詳細情報を書く。</p>
  </details>

• details要素の開閉デモ
  ここをクリックして詳しく見る

  ここに詳細情報を書く。

  
  
  JavaScriptはいらない。
  summary要素をクリックすれば、ブラウザ自身が開閉処理を行ってくれる。
  最初から開いておきたい場合は、<details open>と『open属性』を付ければいい
  あるいはJavaScriptから、details.open = true;のように操作することもできる。
  開閉状態が変化すれば『toggle』イベントも発生する。
  つまり details要素 は単にCSSで要素を隠しているのではない。
  「開いている・閉じている」という状態そのものをHTMLが持っている。
  これが大きな特徴だ。
  
  details要素で作った脚注のサンプルデモ：https://labo.studio-happyvalley.com/details/base

details要素の登場と歴史

• 歴史
  details要素 はHTML5時代に登場した、すでに十数年の歴史を持つ要素だ。
  当初はブラウザ対応にもばらつきがあったが、現在では主要ブラウザに広く実装されている。
  最近では name 属性による排他的アコーディオンまで可能になり、古代魔法ながら今なお改良が続いている。
• detailsだけでアコーディオン
  現在の details要素 には ‘name’ 属性もある。
  同じ名前のname属性を持つdetails要素であれば排他処理がなされる。

  <details name="magic">
  summary要素炎魔法</summary>
  FIRE!
  </details>
  
  <details name="magic">
  summary要素氷魔法</summary>
  ICE!
  </details>
  
  <details name="magic">
  summary要素雷魔法</summary>
  THUNDER!
  </details>

• details要素の排他処理デモ
  要素炎魔法

  FIRE!

  
  

  要素氷魔法

  ICE!

  
  

  要素雷魔法

  THUNDER!
• 古代遺跡も静かに進化している
  同じ `name` を持つ details要素 をグループ化すると、一つを開いたとき、それまで開いていたものを閉じられる。
  つまり、JavaScriptなしで排他的アコーディオンまで作れる。
  昔ならクリックイベントを登録して、他の要素の状態を調べて……と書いていた処理である。
  古代遺跡も静かに進化していた。
  
  進化を続けるdetails要素。：https://labo.studio-happyvalley.com/details/mutex/
• details要素についての詳しい仕様はMDNを。
  詳しい仕様説明はMDNを。
  
  MDNによるdetails要素の解説：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/details

details要素で脚注を錬成する

• details要素の用途定義を発掘
  脚注を錬成するため、詳しく調査を進めると意外なスクロール状の碑文が発掘された。
  これによると当時の魔道省はdetails要素 について「脚注には適切ではない「脚注には適切ではない」
  WHATWGの現行HTML仕様は、details について「脚注には適切ではない」と明記されている。これはホント。」と明記している。
  
  う～む、これは先が思いやられると詳しく調べていくと、details要素 は、その内容を無視しても文書の意味が変わらないような補足情報や、ユーザーが表示・非表示を切り替えられるUIに使うものだ、と説明されている。
  
  なるほど、本来details要素が使われるべきと定義してある用途は、まさにこれから私がやろうとしている脚注そのもの。これなら特に注意すべきことでもないので details要素 の脚注化を進めていこうと思う。
• summary要素の扱いがポイント
  『summary要素』 を脚注のトリガーとして使い、details要素の内部に説明を書く。いわゆる親子にする。何人こどもがいてもOK。

  <details class="anchor-note">
  <summary>HapiVariant</summary>
  <span class="footnote">
  この世界ハッピィバリーのパラレルワールド。
  魔法が存在する。
  </span>
  </details>

• details要素で実装した脚注システム
  details要素で実装した脚注システム：https://labo.studio-happyvalley.com/details/popup/
  
  開く・閉じる処理はブラウザへ任せられる。
  JavaScriptはいらない不要。このしくみにCSSでスタイルを設定すれば、クリックすると脚注がポップアップするシステムの誕生だ。
• details式脚注の問題点
  しかし、途中経過を記してはいないが、実はsummaryの扱いがかなり面倒だった。もともとのデフォルトでsummay要素は三角系マークを表示したり、基本がブロック要素のため、文章中で改行されたりなど、これらのデフォルト設定を消すのが非常に手間がかかる。
  
  どうせ親子のセットにするのであれば、何もdetails要素をつかう必要はないんじゃないか？？
  この疑問は当然のことだと思う。
  そこで、details古代魔法の紹介からちょっと脇道へずれてしまうが、details要素にとらわれない、脚注システムを次の章で研究してみようと思う。

Details要素とSummary要素のしばりから解放する

• 単純なspan要素で脚注を組むとクリックの問題がでてくる
  まずはspan要素で脚注システムを組んでみた。

  <span class="anchor-note">
  魔法世界『ハピバリアント』
  
  <span class="footnote">
  『HapiVariant』。<br>
  この世界ハッピィバリーのパラレルワールド。
  魔法が存在する。
  </span>
  </span>

• span要素で組んだ脚注システムのデモ。
  動作見本はこのページにも使用しているので適宜ご覧いただきたい。
  
  解説だが、details要素を使わずにspan要素で親子に組むと、まずクリックする方法が必要になる。
  しかし、ここでよく考える必要がある。脚注を表示させるのに、はたしてクリックする必要があるのか？マウスオーバーでもよくないか。
  
  この問題は前回の『:has()疑似クラスでレイヤーの重なりを自在に制御する』でもあったが結論は、やはり同じ。
  マウスオーバーが最適。
  十分ではなく、最適、なにより閉じる動作が不要なので。
  コーディングも親子関係なので:hover疑似クラスを使うだけで完了する。

画面端問題

• 脚注といえば必ず考慮すべきなのが、画面端問題。
  画面端の問題とは、アンカー文字列が右端に寄ってしまった場合などに、脚注の吹き出しが画面からはみ出してしまう問題のこと。
  この問題も考慮すべき課題。というか最も重要な問題。
  もちろん、デザインで解決する方法はある。センターに配置して文書段落の余白を脚注のボックスを囲う十分なスペースを開ければよい。
  ただ、やはりきちんと矢印付きの吹き出しでデザインしたい気持ちは強い。
  このサイトでも脚注を実装しているがこの画面端問題はJSで解決している。下記の図のとおり、JSを使えば左右反転は簡単だ。

  

• 脚注の結論はこれまどおり、JSがふさわしいところはJSを使う。
  もちろん、このJSを使う方法はdetails要素を使う脚注システムでも有効だ。
  なので、どちらの方法であっても脚注をスマートに実装するには、やはりJSは必須と考えられる。
  さらに脚注だけを考えると、敢えてクリックする必要もなく通常のspan要素などを親子に組んで、:hoverで表示/非表示を切り替えるのがよさそうだ。

Details要素式脚注システムと他の脚注システムを比較する

• details要素を使用しない脚注の使い勝手は？…実はシンプルで使いやすいし、難しい処理はJSで補えばよいという結論に。
  古代魔法であるdetails要素の真価を見極めるために、脚注の開発を軸にし、details要素をつかう案と使わない案で比較するという流れになったわけだが…、details要素の古代魔法としての奥深さを解説するつもりが、『details要素を使うより普通にspan要素で親子に組もう』というなんとも、しまりのない報告になってしまった。
  ま、大魔導士も杖の誤りとも言うし爆！諸君も間違いを恐れずに新たな研究に大いに励んでもらい…と、ここで報告書を閉めようと思ったところ、魔導省から新たな布告が届いた。

新たな進化

• 魔道省からの便りの内容とは
  さて、魔道省の布告の内容だが、「CSS Anchor PositioningをWeb Baselineとして認可」という内容だ。
  このAnchor Positioning。なんでも、ある要素に名前を与え、その位置を別の要素から参照できるという。
  最近、魔道省が策定するCSSで増えてきている、「DOMの親子関係や隣接関係だけに頼らず、名前を付けて離れたもの同士を論理的に結び付ける」流れの一環のような気もする。
  というより、脚注を軸とした古代魔法 details要素の解剖じゃない、解析中に、ずいぶん都合のいいものが届いたものだ。
  まあ。魔道省には孫が勤務しているからな。
  って、え？いったい何歳なんだ！って？。。。キ、キミ、女性に年を聞くもんではないよ

進化したCSS Anchor Positioning モジュールの新たな概念『絆』と『布陣』

• 親子関係にとらわれない新たな『絆』のしくみ
  CSS Anchor Positioningは、ある要素をアンカーとして登録し、位置指定要素と呼ばれる別の要素をアンカーの位置を基準として配置する仕組みだ。
  
  基準となる側へ
  .anchor-note {
  anchor-name: --hapi;
  }
  
  表示する側へ
  .footnote {
  position-anchor: --hapi;
  }
  
  と指定する。これによって、たとえば脚注の場合、親子でなくてもアンカー（参照元ターゲット文字列：以後アンカー）と脚注の文字列を関連付け、必要な時に脚注をアンカーのそばに表示させることができる。
  ここで重要なのは、アンカーと位置指定要素がDOM上の親子である必要がないという点だ。まさに『絆』。CSS革命のキーワードでもある。
  これまでの `position: relative / absolute` との大きな違いが、ここにある。

CSS Anchor Positioning モジュールの策定と歴史

• 詳しい説明をする前に、歴史など。
  魔道省CSS庁が Anchor Positioning の草案を公開「草案を公開」
  こちらの世界では、W3CのCSS Working Groupが CSS Anchor Positioning Module Level 1 の First Public Working Draftを2023年6月29日に公開。
  したのは2023年6月29日。
  まだ3年ほどしか経っていない。しかも最初の公開仕当初から、tooltipや pop-up footnote のようなものを具体的な用途として挙げ、画面からはみ出した場合に代替位置を試すfallbackの仕組みの説明まである…？なにこれ？ちょっと期待しちゃうね　まるで脚注じゃないか。
  
  さて、anchor positioningはモジュールと記載されてる通り、かなり幅広い関数やプロパティを含み、その一部ではブラウザ魔法具の実装がかなり進んでいる。
  魔道評議連盟MDN「魔道評議連盟MDN」
  こちらの世界のMDNのこと。
  
  ジェミパラ女史の世界では魔道評議連盟MDN（Majestic Dawn Notifier）と呼ばれてるらしい。
  では anchor-name や anchor() などが 2026年1月にBaseline 2026 Newly available になっている。
  つまり術式魔法として使えるようになってきたのは、本当に2026年の今年ということになる。
  仕様自体もまだまだ、Working Draftとして進化中のようだ。

新たな『絆』 anchor-nameとposition-anchor

• 『絆』（相互関係）：anchor-name と position-anchor
  もう一度おさらいだ、役割を整理すると分かりやすい。
  アンカー側の
  anchor-name: --hapi
  は、私のアンカー名は 『--hapi』 です。という宣言。
  
  脚注（位置指定要素）の、
  position-anchor: --hapi;
  は、 アンカー『--hapi』 を基準として、私は配置されます。という宣言だ。
  
  名前によって、DOM上で離れた二つの要素に位置関係『絆』を作る。
  これがAnchor Positioningの基本となる。
• アンカー名。anchor-name: --hapi
  アンカー名の--hapi はCSS変数ではない。
  Anchor Positioningでは、『dashed-ident』 を使って作者定義の識別子を表す 。
  将来的にユーザーが作るアンカー名と他のCSSプロパティ名との名前衝突を『--』 によって避けているわけだ。
  -が二つというのも識別用としては自然な流れといえる

まるで『布陣』。位置指定の新しい概念

• 位置の基点にアンカーの座標を使う。anchor()関数
  脚注の相互関係を作ったら、実際に位置を指定する。
  ここで登場するのが、anchor()だ。
  たとえば、
  
  .footnote {
  position: fixed;
  position-anchor: --hapi;
  
  top: anchor(bottom);
  left: anchor(left);
  }
  
  とする。これは、
  footnoteのtop(上端)をアンカーのbottom(下端)へ置く。
  footnoteのleft(左端)をアンカーのleft(左端)へ合わせる。
  という意味になる。まるでアメフトのフォーメーションのようだ。
  まさに布陣という言葉がぴったりだと思わないかい？
  
  

  

  1. 脚注のtopをアンカーのbottomに合わせ、 脚注のleftをアンカーのleftに合わせる

• AnchorA Positioningの布陣を使った脚注デモ
  AnchorA Positioningの布陣を使った脚注デモ：https://labo.studio-happyvalley.com/anchorPositioning/footnote/
• calc()で計算も可能
  さらに、
  
  top: calc(anchor(bottom) + .5rem);
  left: calc(anchor(left) + 1rem);
  とすれば、細かな位置調整もできる。この自由度は高い。
  従来JavaScriptの、element.getBoundingClientRect();で取得していた座標情報を、CSSでも取得可能になったということだろう。
  
  
  

サイズも刷新って、サイズもか

• もうここまできたらなんでも来い
  Anchor Positioningで利用できるのは位置だけではない。
  アンカーの大きさも取得できる。
  width: anchor-size(width);
  
  さらに、
  width: calc(anchor-size(width) * 2);
  のような計算も可能だ。
  
  まとめると、
  anchor()　→ アンカーの位置を使う
  anchor-size()　→ アンカーの大きさを使う
  calc()　→ 取得した値を加工する
  という関係になる。

もっと大まかな位置指定方法

• position-areaでざっくりと
  もっと大まかに、アンカーの右側へ置け。という指定もできる。
  position-area: right;
  
  あるいは、
  position-area: bottom right;
  のように、アンカー周辺を領域として捉えて配置する。
  
  大まかな位置指定なら position-area。
  細かなデザインなら anchor()。
  とはいえ単純な左揃えみたいなのも後者を使う必要があるみたいだ。。
• それぞれの位置の詳しい相互関係はMDNで確認してほしい。
  わかりやすい図面もあるので一度ご覧になることをお薦めする。
  
  MDNによるposition-areaの解説とマップ図面：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/position-area

position-try-fallbacks ― 画面端から飛び出さない魔法

• 魔道省、ここまでやるか
  そして今回、最も驚いた機能がこれだ。
  
  position-try-fallbacks
  
  脚注をアンカーの右側へ表示したい。
  しかし画面右端に近く、表示するスペースがない。
  反対側へ移動させよう！
  
  従来ならJavaScriptで、計算していた処理である
  上の章でも紹介しているが、JSで10行程度は必要になる。その処理を…・
  Anchor Positioningなら、1行でスマートに処理してしまう。
  
  たとえば、下記のプロパティで左右方向の反転を候補として利用できる。
  position-try-fallbacks: flip-inline;
  上下方向の反転なら下記のプロパティ
  position-try-fallbacks: flip-block
  
  ※ちなみに、候補として利用できる、という言い回しを使っているが、まさしく、反転させるのは候補の一つということだ。
  脚注の横幅を指定してない条件だと、余白に合わせて自動で脚注の横幅を調整してくれる。そしてどうしても無理なときだけに反転という方法を選ぶようになっている。この仕組みをひっとうに始めとしてAnchor Positoning モジュール群には非常に複雑な仕様が盛り込められている。また時期を見て紹介しようと思う。
• コンポーネントデザインを見据えた仕様
  ツールチップ、吹き出し、補足説明、脚注。
  まさにこうしたUIを想定した機能である。
  これは素晴らしい。
  
  position-try-fallbacksの驚愕の機能デモ：https://labo.studio-happyvalley.com/anchorPositioning/footnote/align/
• 素晴らしいのだが…
  さて、デモを見てお気づきだろうか？そう何となく脚注がシンプル。矢印が付いてない。ただの四角じゃん^^！
  いや、ここはもっと疑似要素とか使って吹き出し風のデザインにしてほしいんだが…。
  
  じつはこれには理由がある。

位置が反転したら、デザインも反転したい

• 実際に疑似要素で三角系のオブジェクトを付けたしてみると
  たとえば下図①のように、三角矢印を脚注の左上に付けたとする。

  

• ところが `position-try-fallbacks` によって脚注が左へ移動したら、図②のように
  矢印はもとのままで、脚注の位置だけが反対側へ移動してしまう。
  これは何とも間抜けな吹き出しだ。
  
  つまりanchor positioning』は画面の余白を検知して脚注を左右・実は上下にも振り分ける機能を実装しているにも関わらず、
  オブジェクト自体を反転させることは無視しているわけである。
  
  たしかに、反転させると文字列が反転して読めないとかいろいろ事故が起こるであろうことは容易に予想できる。が、
  そこは反転させなくとも、せめて『reverse』とかの属性を付与する、などなど、移動のタイミングが追加されれば何とでもなるのに。
  このように現状ではいつ反転するかのタイミングをつかめない。
• 究極のそして最もスマートな脚注の完成かと思いきや…
  ここまでの脚注の研究をまとめると、
  最新CSS魔法の『anchor positioning』を使えば左右・上下のどこへ移動しても脚注が隠れるような不具合は発生しない。
  しかし、それには条件があり、対称的なデザインならOKというデザイン上の制約が発生する。
• 反転問題をデザインで解決する研究。
  対象図形でのデザイン検討をしなかったわけではなく、矢印のみをアンカーのセンターに表示させる案などいろいろ考慮し、進めてみた。
  
  たとえば下図のバージョン。①の通常状態は問題ない。矢印の三角も問題ない。次に②の右端に余白がない場合。この状態でも違和感なく三角矢印が表示されている。
  しかし、③のアンカーが改行されるケース。ここでは三角の矢印が脚注の吹き出しからはみ出してしまっている。
  
  ここはもう少し何とかなりそうな気配はあるのだが、position-try-fallbacksが反転するタイミングを取得できない現状ではやはり矢印付きの吹き出しは難しいと言わざるを得ない。

  

• 反転をデザインで解決する研究。JS無し
  上の画像のデモ。
  
  反転をデザインで解決する研究。JS無し：https://labo.studio-happyvalley.com/anchorPositioning/footnote/align_withArrow/
• 究極のそして最もスマートな脚注の完成かと思いきや…
  このように、CSS側の都合によってデザインを対称形に制限するというのは、本来の開発のあるべき姿ではない。
  残念ながら、ここだけを見ると、すでに実装しているJS補間方式を捨ててAnchor Positioningへ全面移行しようという気にはならない。
  まだまだ、JSを補佐として、脚注を親子関係で組み立てるセットが続いていくのかと思われる・・・
• anchor-scope ― 同じ名前を使いたい
  もうひとつ『anchor positioning』には渋い機能があって、anchor-scopeという。
  これはアンカー名の重複を考慮した機能。アンカー名のセットを毎回新規で作るのが面倒という場合のプロパティ。
  
  スコープという通り、アンカー名の有効範囲を限定できる。
  方法は、スコープにする....いわゆる親子関係にする。...て、爆！！
  じゃあ、Anchor Positioningにする必要ないじゃん！
  なんともお粗末すぎるプロパティである。
  これではAnchor Positioningの意味がない。
  
  Anchor Positioningの『絆と布陣』が輝く世界はもっと他にある。のでは？と孫のためにもさらに研究を進めてみた。
  

現状方式の気になる点

• 現在このサイトで実装している脚注の気になる点
  今回の脚注開発とは方向性の違う話になるのだが、実はこのサイトで実装している脚注システム。表示や、機能については満足しているんだが、更新時の作業【更新時の作業内容】
  ジェミパラさん、古代魔法の発掘調査が専門の魔導士なのにそんなこともやるのかって？
  
  お伺いした話では、研究・開発・理論構築だけじゃなくて、その報告書や、論文作成、普及・啓蒙活動などやるべきことが沢山あるらしく、このサイトもその一環らしい。
  
  とはいえ、高度な術式をお使いのようで手作業部分はごく僅かとのことだ。
  内容に非常に不満がある。
  親子関係にする必要があるため、毎回文章の中に脚注を埋め込む作業が手間なんだ。
  なんとかこの『anchor positioning』のシステムを取り入れられれば非常に効率的になると感じてるんだけどね。
  
  と、考えてると名案が浮かんだ。
  

トリビアとして独立させる、そして召喚。

• トリビアと脚注の合体
  これまでも文章中に書き足りなかったり、説明を入れると文章の流れが悪くなってしまうなどの理由で文章の最後尾に『トリビア』として１章まるまる追加することがあった。
  
  そのトリビアの章を全部脚注のグループにしてしまえばいいんじゃないかってこと。
  これだと、文章の最後尾に設置するのでSEO上もいい。本来の文章の流れを止めることもない。しかも文章内でマウスオバーすればその説明をすぐ側に表示させることができる。画面からは隠れている場所から説明文を必要な時だけ呼び出す、これこそ召喚といえるんじゃないか！
  
  
  更新の点でも非常に便利だ、本文をそれほど触る必要がなく、あとから好きなだけ脚注を追加することが可能だ。それになんといっても最後に全部の脚注を見ることができる。これまでの脚注は見ようとしないと見えないからね。脚注をトリビアとして一元管理できるのはホント革新的だ。

トリビア召喚方式を実装してみる

• まずは基本的な文章とトリビアの2段落に分けたデモ
  これまでのanchor positioningの仕様通り、大きな変更はない。
  一、二点、注意すべき点があるとすれば…、
  普通の:hoverでは使えないので、:has()を使う。
  body:has(.anchor-note:hover) .footnote {...}
  また、通常positionプロパティの値は『absolute』を使うが、今回は親子ではないので使えない。
  変な感じだが、『position: fixed』を使う。
  
  これでアンカーの文字列.anchor-noteにマウスが乗った時、トリビアの該当文字列.footnoteが脚注として呼び出される。
  マウスを外せば `position: fixed` が解除され、トリビアへ戻る。
  同じ一つの脚注が、必要なときだけアンカーの側に呼び出される。
  
  まさに召喚である。

  body:has(.anchor-note:hover) .footnote {
    position: fixed;
    position-anchor: --hapi-variant;
  
    top: anchor(bottom);
    left: anchor(left);
  
    position-try-fallbacks: flip-inline;
  }

• シングル方式のデモ
  サンプルではわかりやすさのためにトリビア段落をposition:fixedで固定している。
  
  シングル方式のデモ：https://labo.studio-happyvalley.com/anchorPositioning/endnote_single/
• 脚注を複数設置し、より実践的に構築した。
  下記のデモの下にコードを掲載した。脚注を複数にすると、脚注一個につきCSSを1行追加する必要がある。
  また、HTMLも一つの脚注につき、2行を修正する必要がある。
  まあ、追加ではないし、修正も僅かなので許容範囲だとは思うが。
  
  複数脚注のデモ：https://labo.studio-happyvalley.com/anchorPositioning/endnote_multiple/

  /* CSS */
  &:has(span[style="anchor-name: --n1"]:hover) .footnote[style= "position-anchor: --n1"],
  &:has(span[style="anchor-name: --n2"]:hover) .footnote[style= "position-anchor: --n2"],
  &:has(span[style="anchor-name: --n3"]:hover) .footnote[style= "position-anchor: --n3"]
  
  <!-- HTML -->
  <span class="anchor-note" style="anchor-name: --n1"></span><!-- アンカー-->
  <span class="footnote" style="position-anchor: --n1"></span><!-- 脚注ー-->

トリビア召喚方式脚注の魅力と不足点、それらを評価する

• 反転する仕様自体は変わらない、見た目もこれまでとそれほど大きな違いはない
  さて、デモを開発してみた感想だが、トリビアと文章に区分けしたからといって、これまでの不満点だった、脚注反転時の仕様が解決するわけではない。
  
  しかし、脚注をトリビアとしてセマンテックにページ中に配置できること、隠れないことによるSEO的な強み、そして、何より更新時の効率の良さ。
  これらの魅力に比べれば脚注のデザインが上下左右軸の対象に限定されるのは大したことではないといえる。
  
  つまり今回のトリビア召喚式脚注開発。眼で見える部分はこれまでの脚注とたいして変わらない。しかし、内部的には脚注革命といってもいい、劇的な進化が起きたといえる。
  ここまで魅力的なシステムだ。近いうちにこのサイトで確実に実装することになると思う。

進化する概念『絆と布陣』

• details要素の紹介だったのかな？
  今回の発掘はdetails要素の紹介がテーマだった。
  そう、details要素が主役のはずだったんだが…。
  
  そ、そもそもは、この術式は奥が深い。『アコーディオン用途だった』だけで調査を終わらせるのはあまりにもったいない。で始まり…。
  
  さらには脚注開発がdetails要素の真価を解説するのにピッタリじゃないかと、調査と研究をすすめていたわけだが...。
  私の発掘調査を知ってか知らずか孫のやつが出来立てほやほやの新たなモジュールを送ってきおった。爆！
  
  というわけで、孫の挑戦なら受けてやらねばと奮起した次第。
  
  さて脚注開発の成果だが、単純な脚注なら、親子関係にしてpositionプロパティで十分かもしれない。開閉状態は:has(anchor:hover) footnoteでOK。
  開閉状態をHTMLだけに任せたいなら、details要素にすればよい。（や、やっと出番が…）
  そうして本文と脚注を分離しようと考えた時、CSS Anchor Positioningの新たな概念が姿を現し始めた。
  
  結果、脚注の実験開発の果てにたどり着いたのがトリビア召喚式脚注というわけだ。
  なんか主役がどっかに行ってしまったのが悔やまれるが(;^_^A
  大魔導士も杖の誤りということでご容赦！