[HTML] detailsとsummaryタグでアコーディオン（開閉）コンテンツを作る

htmlの <details>タグと <summary>タグ を使うと、JavaScript なしで手軽に開閉コンテンツ（アコーディオン）を作成できます。

details / summary タグとは

<details> タグはHTML5で導入された要素で、開閉可能なコンテンツを作成するためのタグです。
通常は子要素として <summary> タグを配置し、その内容が「見出し（キャプション）」として表示されます。
クリック（タップ）すると、詳細部分を表示・非表示できます。

details / summary を使うメリット・デメリット

JavaScript や jQuery を組み合わせて <dl>・<dt>・<dd> などで同様の開閉機能を作ることもできますが、details / summary を使うことで以下のような利点と注意点があります。

メリット

・セマンティクス（HTML構造として正しい）
<details> は「詳細を開閉する要素」、<summary> は「開閉ボタン」という明確な意味を持ち、ブラウザやスクリーンリーダーに正しく伝わります。

・キーボード操作 & アクセシビリティに対応
<summary>は Enter キー / Space キーで開閉可能。
「開いている」「閉じている」も支援技術に正しく認識されます。

・JavaScript なしでも動作
JavaScript / jQuery が無効な環境でも開閉機能が基本的にそのまま使えます。
（※ display: none; で非表示にしている場合は開閉できません）

デメリット

・<summary> のデフォルト三角アイコンの調整が必要
標準で表示される三角形アイコンを消したり、位置やデザインを変更する場合は CSS によるカスタマイズが必要です。

details / summary タグの基本的な使い方

See the Pen [HTML] details , summary by mkl may (@mkl-may) on CodePen.

summary タグを省略した場合

summary タグがない場合、独自のキャプションを指定できず、ブラウザによって「詳細」などの文言が自動で表示されます。

See the Pen [HTML] details , summaryなし by mkl may (@mkl-may) on CodePen.

初期状態で開いた状態にする

<details>タグに open 属性 を付けると、読み込み時に開いた状態で表示できます。

See the Pen [HTML] details , open属性付与 by mkl may (@mkl-may) on CodePen.

details / summary の CSS カスタマイズ

標準の三角アイコンを消す

summary の初期値は display: list-item; のため三角アイコンが表示されます。
display: block; など別の display を指定することで非表示にできます。

独自アイコンへ変更する

デフォルト矢印を消した上で、疑似要素などを使って自作アイコンや画像を表示します。

See the Pen [HTML] details , アイコンカスタマイズ by mkl may (@mkl-may) on CodePen.

開閉アニメーションを付ける

iPhone の Safari や Chrome では、開閉のたびに毎回アニメーションが実行されることを確認しています。
一方、PCブラウザでは初回のみしかアニメーションしない場合があります。
確実に毎回アニメーションさせたい場合は、JavaScript を併用する必要があります。

See the Pen [HTML] details , animation by mkl may (@mkl-may) on CodePen.

完成形

See the Pen [HTML] details 完成形 by mkl may (@mkl-may) on CodePen.

details / summary タグ + jQuery でスムーズに開閉するアコーディオン

以下の記事では、details / summary の基本仕様を保ちながら、jQuery を追加してスムーズなアニメーションを実現する方法を紹介しています。
※jQuery が効かない環境でも、details / summary の標準開閉機能は動作します。