HTML5で登場した便利なタグdetailsとsummaryの使い方を紹介します。サービスサイトやLPなどジャンルに関わらず「よくある質問」があると思いますがうってつけのタグですので、ぜひ使い方を覚えましょう。
detailsとsummaryタグの使い方
<details>
<summary>よくある質問タイトル 01</summary>
<p>よくある質問の回答はこちら。</p>
</details>detailsタグ
開閉を行いたい部分を囲みます。
summaryタグ
最初に表示しておきたい要素を囲みます。よくある質問だと質問部分を囲みます。※detailsタグの中に配置するようにしてください。
pタグ
こちらのタグはサンプルとしてpタグを使用していますが、他のタグも使用可能です。適切なものを使用してください。
デモ
よくある質問タイトル 01
よくある質問の回答はこちら。
使用可能ブラウザ
2020/09時点だとIEが例によって対応していませんね、、、
SPだけこちらを使用するとかそもそもIEを気にしなくて良い環境（羨ましい、、、）でなら気兼ねなく利用できますね。
