このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<details>: 詳細折りたたみ要素
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
<details> はHTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは<summary> 要素を使用して提供する必要があります。
折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。<summary> 要素のコンテンツは、折りたたみウィジェットのラベルとして使用されます。<details> のコンテンツは、<summary> のアクセシブル説明を提供します。
試してみましょう
<details> <summary>詳細</summary> 何気なく見過ごしてしまうほど小さなもの。</details>details { border: 1px solid #aaaaaa; border-radius: 4px; padding: 0.5em 0.5em 0;}summary { font-weight: bold; margin: -0.5em -0.5em 0; padding: 0.5em;}details[open] { padding: 0.5em;}details[open] summary { border-bottom: 1px solid #aaaaaa; margin-bottom: 0.5em;}<details> ウィジェットは 2 つの状態のうち 1 つを取ります。既定の閉じた状態では、三角形と<summary> の中のラベル（または<summary> がない場合はユーザーエージェントが定義した既定の文字列）のみを表示します。
ユーザーがウィジェットをクリックするか、フォーカスしてスペースバーを押すと、ウィジェットは「ツイスト」して開き、中身が見えるようになります。ウィジェットの開閉を表すために、回転したりねじれたりする三角形を使用することが多いため、「ツイスティ」 (twisty) と呼ばれることもあります。
CSS を使用して、折りたたみウィジェットのスタイルを設定することができます。また、open 属性を設定したり削除したりすることによって、プログラムからウィジェットを開いたり閉じたりすることも可能です。残念ながら、現時点では、開閉の遷移をアニメーションで表現する方法は組み込まれていません。
既定では、ウィジェットが閉じている時、折りたたみの三角形と概要が表示できるだけの高さしかありません。ウィジェットが開くと、要素は中に含まれた詳細が表示できるだけの大きさに拡大されます。
完全な標準互換の実装では、 CSS のdisplay: list-item<summary> に適用されます。これを使用したり::marker 擬似要素を使用したりして、折りたたみウィジェットをカスタマイズすることができます。
属性
この要素にはグローバル属性があります。
openこの論理属性は、現在詳細（つまり
<details>要素の内容）が現在表示されていることを示します。この属性がある場合は詳細が表示され、この属性がない場合は非表示になります。既定では、この属性は存在しないため、詳細は表示されません。メモ:詳細を非表示にするには、この属性を完全に削除する必要があります。この属性は論理属性なので、
open="false"では詳細が表示状態になります。nameこの属性により、複数の
<details>要素を関連付け、一度に 1 つだけ開くことができます。これにより、開発者はスクリプトを使用せずに、アコーディオンなどの UI 機能を簡単に作成できます。name属性はグループ名を指定します。複数の<details>要素をグループ化するには、それらに同じname値を指定してください。グループ化された<details>要素は、一度に 1 つしか開くことができません。1 つを開くと、他の要素は閉じられます。複数のグループ化された<details>要素にopen属性が指定されている場合、ソースの順序で最初の要素のみが開きます。メモ:
<details>要素は、同じグループの一部であるために、ソース内で互いに隣接している必要はありません。
イベント
HTML で対応している通常のイベントに加えて、<details> 要素はtoggle イベントに対応しており、開閉状態が変化するたびに<details> 要素が呼び出されます。イベントは状態が変化した後に送信され、もしブラウザーがイベントを送信する前に状態が 2 回以上変化しても、イベントは合体して 1 回しか送信されません。
ウィジェットの状態が変化したことを検出するために、toggle イベントを待ち受けすることができます。
details.addEventListener("toggle", (event) => { if (details.open) { /* 要素が開いた方に切り替わった */ } else { /* 要素が閉じた方に切り替わった */ }});例
基本的な折りたたみの例
この例では<details> 要素を<summary> 付きで表示します。
<details> <summary>システム要件</summary> <p> オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。 </p></details>結果
折りたたみボックスの作成
<details> ボックスを開いた状態にするために、論理値のopen 属性を追加しましょう。
<details open> <summary>システム要件</summary> <p> オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。 </p></details>結果
複数の名前付き折りたたみボックス
同じ名前の<details> ボックスをいくつか用意し、一度に開くことができるのは 1 つだけになるようにしました。
<details name="requirements"> <summary>卒業要件</summary> <p> 健康、地理、歴史、経済、木工の合格点を含む 40 単位が必須です。 </p></details><details name="requirements"> <summary>システム要件</summary> <p> オペレーティングシステムを実行するコンピューターが必要です。コンピューターには、メモリーと、できれば何らかの長期記憶装置が必要です。入力装置および何らかの出力装置も推奨されます。 </p></details><details name="requirements"> <summary>採用条件</summary> <p> HTML、CSS、JavaScript、アクセシビリティ、ウェブパフォーマンス、プライバシー、セキュリティ、国際化に関する知識、そしてブロッコリーが嫌いでなければなりません。 </p></details>結果
すべての折りたたみウィジェットを開いてみてください。 1 つを開くと、それ以外のウィジェットはすべて自動的に閉じられます。
外見のカスタマイズ
では、いくらか CSS を適用して折りたたみボックスの外見をカスタマイズしましょう。
CSS
details { font: 16px "Open Sans", "Calibri", sans-serif; width: 620px;}details > summary { padding: 2px 6px; width: 15em; background-color: #dddddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer;}details > p { border-radius: 0 0 10px 10px; background-color: #dddddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black;}details:open > summary { background-color: #ccccff;}この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。
メモ:ブラウザーが:open 擬似クラスに対応していない場合、属性セレクターdetails[open] を使用して、<details> 要素が開いている状態のときにスタイルを設定することができます。
HTML
<details> <summary>システム要件</summary> <p> オペレーティングシステムを実行するコンピューターが必要です。コンピューターには、メモリーと、できれば何らかの長期記憶装置が必要です。入力装置および何らかの出力装置も推奨されます。 </p></details>結果
折りたたみウィジェットをカスタマイズする例については、<summary> ページをご覧ください。
技術的概要
| コンテンツカテゴリー | フローコンテンツ、区分化ルート、対話型コンテンツ、知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 1 つの<summary> 要素と、それに続くフローコンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙的な ARIA ロール | group |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLDetailsElement |
仕様書
| Specification |
|---|
| HTML # the-details-element |