HTML Detailsアコーディオンジェネレーターとは
details要素とsummary要素は、HTMLでネイティブな折りたたみパネルを作成します。summaryは常に表示され、トグルとして機能します。クリックすると、detailsの残りのコンテンツが展開されます。name属性を使用すると、複数のdetailsを排他的に開くことができ、アコーディオン動作を実現します。これらはJavaScriptなしで動作します。
クイックアンサー
ネイティブのHTML details要素とsummary要素を使用して、JavaScriptなしで動作するアコーディオンを作成します。各details要素は独立しており、ユーザーが開閉できます。
Last updated: 2026-05-25
制限事項
- ネイティブのdetails要素は、1つのセクションを開くと自動的に他を閉じる動作をサポートしていません。その動作にはカスタムJavaScriptまたはname属性による排他アコーディオン動作が必要です。
- open属性はdetails要素が最初から展開されているかどうかを制御します。ブール値の状態のみで、部分的な展開はありません。
- Safari 17以下はdetails要素の開閉アニメーションをサポートしていません。トランジションにはCSS離散トランジションポリフィルが必要です。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- アコーディオンに入れる項目を、タイトル|コンテンツのペアで1行ずつ入力します。
- アコーディオンの動作として、排他モードか複数開くモードを選択します。
- ツールがdetails/summaryのHTMLとCSSスタイリングを生成します。
- マークアップとCSSをページにコピーします。
主な用途
- 製品ページやサービスページ用のFAQアコーディオンを構築する。
- リファレンスサイト用の折りたたみ可能なドキュメントセクションを作成する。
- 長文コンテンツのブログ投稿に展開可能なコンテンツブロックを追加する。