Blogブログ

簡単にアコーディオンを作れるHTMLタグ

はじめまして、WebチームのNです。4月からアルバイトとして入社し、Webサイトのコーディング業務に従事しています。今回初めてブログを書くことになったので、業務を通して知ったHTML要素、detailsとsummaryについてまとめさせていただきます。

【概要】
detailsとsummaryは折りたたみ要素を作れるタグで、セットで使います。
summaryに見出しを書き、それをクリックするとdetailsが開いて説明文が表示されます。
もう一度クリックすれば閉じて説明文が隠れるので、これでアコーディオンのベースが作れます。
今までは開閉動作を実装するにはJavaScriptを書く必要がありましたが、detailsとsummaryを使えばHTMLだけで実装できちゃいます。標準でアクセシビリティが完備されていて、全てのモダンブラウザに対応しているので、安心して使えますね。

▼HTMLサンプル

▼表示イメージ

【使い方】
detailsとsummaryには専用の属性や擬似要素があり、
それらを使うことで見た目やアニメーションを整えられます。
OPEN属性はdetailsが開いている時に付与される属性です。あらかじめOPEN属性をつけておけば、最初から開いた状態にすることができます。
属性セレクタと::details-contentを組み合わせれば、開いた状態の子要素を選択できるので、開閉に合わせてアイコンを変えたり、説明文が表示される時にアニメーションを付けたりできます。
また、summaryの左には標準で▶︎がつきますが::markerにdisplay:noneを指定したり、summaryにlist-style:noneを指定すれば消せます。
さらにdetailsにはname属性をつけることができ、複数のdetailsに同じname値をつけることで一つのグループにまとめられます。こうすることで、同時に開く要素を一つだけにすることができます。
これらの属性や擬似要素を活用することで、よくある質問集みたいなパーツを作れます。

▼実装例

【まとめ】
detailsとsummaryを使えば、JavaScript書かなくてもアコーディオンを作れるので便利ですね。細かいアニメーションまでこだわるなら追加でJavaScriptを書く必要はありますが、HTML構造がシンプルになるだけでもメリットは大きいので、このタグは積極的に使っていこうと思います。

参考サイト：
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/details
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/summary
https://developer.mozilla.org/en-US/docs/Web/CSS/::details-content