はじめに
学んだことを忘れないように備忘録として残しています
detailsタグとは
detailsタグは、クリックでコンテンツを表示・非表示にできるHTMLのネイティブ機能です。JavaScriptを使わずに簡単なアコーディオンメニューを作成できます。
使い方
1.detailsタグで全体を囲う
2.summaryタグ内に折りたたみ可能なヘッダー部分を記述
See the Pen Untitled by 柏木菜南 (@vccpppsz-the-flexboxer) on CodePen.
メリットとデメリット
【メリット】
- JavaScriptが不要
- 主要ブラウザ（最新のChrome, Firefox, Edge, Safari）はすべて対応
- 記述量が少なく、基本機能をすぐに利用可能
【デメリット】
- 見た目や動作の細かい制御（例えばアニメーション）には不向き
- 単一開閉の実装が必要: 複数のdetailsタグを使う場合、一度に一つしか開けない挙動を作るには追加の工夫が必要
- IEなど古いバージョンのブラウザでは動作しない場合がある
JavaScriptを使う場合のメリットとデメリット
【メリット】
- 細かい制御が可能(開閉時にアニメーションを付ける。同時に開けるアコーディオンの数を制限するなど）
- 古いブラウザでも問題なく動作させられる
【デメリット】
- コードが複雑化
まとめ
用途に応じた使い分けをしましょう！
- 簡易的なアコーディオン: detailsタグを使う
- 高度なカスタマイズが必要: JavaScriptを使う