details・summaryタグ(開閉パネルを作る)

このレッスンでは、detailsタグとsummaryタグを使った開閉パネルの作り方を学び、JavaScriptなしでアコーディオンUIを実現できるようになることを目標にします。「HTML details summary 使い方」で調べている方向けです。

<details>と<summary>を組み合わせると、JavaScriptを書かなくても、クリックで開閉する「アコーディオンパネル」を作れます。よくある質問(FAQ)のページなどで使われます。

サンプルコードでは、2つの<details>ブロックを用意し、それぞれの<summary>に質問文を、その中に回答の<p>を書いています。実際にクリックしてみると、ブラウザが自動的に開閉のアイコンや動きを提供してくれる様子を確認できます。

初心者がよくつまずくのが、開閉の見た目をデザインでカスタマイズしたい場合の方法です。ブラウザ標準の三角アイコンを消したり変更したりするには、<summary>のlist-styleや疑似要素の調整が必要になり、少し工夫が必要です。

<summary>に書いた内容が常に表示され、クリックすると<details>の中身が開閉します。ブラウザ標準の機能なので、余計なコードなしで手軽に折りたたみ表示を実装できるのが利点です。