CSS fixed: 目次をボタン化してポップアップ表示する

ウインド幅が狭いとき

1. 目次をボタン化します。
   画面右下の方に postion: fixed; で固定表示します。
2. 目次ボタンをクリックすると目次本体を表示します。
   このサンプルでは :focus 擬似クラスで表示しています。
   
3. 目次以外の領域のクリックでも目次を閉じます。

(2020/10-2024/04)
動作     : Edge120, Firefox120, Chrome96

◎ ノート (2024)
・JavaScript を使用しないサンプルです。
  目次の表示や閉じる処理を CSS の :focus で処理する例。