<details> ベースのアコーディオン

解説

HTML標準の details と summary 要素だけで開閉するアコーディオンです。JavaScript を書かなくても、見出しをクリックすれば中身が開き、もう一度押せば閉じます。右端のプラス記号は summary::after で描き、開いた状態を表す details[open] のときに45度回転させて、視覚的に開閉状態を示しています。

よくある質問、商品の補足説明、利用規約の条文など、普段は畳んでおき必要なときだけ展開したい情報に向いています。ブラウザ標準の機能なので、スクリーンリーダーやキーボード操作にも初めから対応しているのが大きな利点です。

カスタマイズと注意

• 開閉アイコンは summary::after の content を変えれば別の記号にできます。
• 複数を同時に開かせたくない場合は、各 details に同じ name 属性を付けると排他制御になります。
• list-style:none で標準の三角マークを消しているため、独自アイコンが見えるようになっています。

使用例・適したシーン

• FAQ セクション
• 詳細スペック表示
• ナビゲーションの折りたたみ