HTML の詳細折りたたみ要素 (<details>) は、ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成するために使用します。概要やラベルは <summary> 要素を使用して提供することができます。

折りたたみウィジェットは普通、画面上に小さな三角形とその隣のラベルで表現され、三角形が回転して開いたり閉じたりする動作を示します。 <details> 要素の最初の子要素が <summary> の場合は、 <summary> 要素が折りたたみウィジェットのラベルとして使用されます。

ウィジェットが開いたり閉じたりする動作を回転する(ねじる)三角形で表すのが一般的な使い方なので、このウィジェットはツイスティー (twisties) と呼ばれることがあります。

<details> ウィジェットは2つの状態のうち1つを取ります。既定の状態(閉じた状態)は <summary> を使用して指定されたラベル文字列(またはユーザーエージェントが定義した既定の文字列)とウィジェット自身による三角形だけを表示します。これは次のように表示されます。

Screenshot of closed <details> widget.

ここでは既定の閉じた状態であり、折りたたみウィジェットと "System Requirements" というラベルが表示されています。ユーザーがこのウィジェットまたはラベルをクリックすると、開いたの状態に変化し、コンテンツが展開されて次のようになります。

Screenshot of open <details> widget.

ここから、 CSS を使用して折りたたみウィジェットの外見を大胆に変更することができ、また open の値を設定することにより、プログラムから開いたり閉じたりすることができます。

ウィジェットが閉じている時、要素の幅と高さは既定で、折りたたみの三角形と概要が表示できるだけの寸法しかありません。ウィジェットが開くと、要素は中に含まれた詳細が表示できるだけの大きさに拡大されます。

残念なことに、現時点では開いたり閉じたりする間のアニメーションを行う方法はありません。

完全な標準互換の実装では、 CSS の display: list-item が自動的に <summary> に適用されます。この表示方法はカスタマイズすることができます。詳しくは折りたたみウィジェットのカスタマイズを参照してください。

コンテンツカテゴリー フローコンテンツ、区分化ルート、対話型コンテンツ、知覚可能コンテンツ
許可された内容 1つの <summary> 要素と、それに続く フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツ を受け入れるすべての要素
許可された ARIA ロール なし
DOM インターフェイス HTMLDetailsElement

属性

この要素はグローバル属性を持ちます。

open
この論理属性は、ページ読み込み時に詳細内容、つまり <details> 要素の内容が表示されるよう指定するものです。既定値は false であり、詳細内容は表示しません。

イベント

HTML で対応している普通のイベントに加えて、 <details> 要素は toggle イベントに対応しており、開いたり閉じたりの状態が変化したときに、どちらの方向であっても呼び出されます。イベントは状態が変化した後に送信され、ブラウザーがイベントを送信する前に状態が2回以上変化しても、イベントは合体して1回しか送信されません。

ウィジェットの状態が変化したことを検出するために、 toggle イベントをリスンすることができます。

detailsElem.addEventListener("toggle", function(evt) {
  if (detailsElem.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
}, false);

単純な折りたたみの例

この例では単に <details> 要素を symmary なしで定義しています。

<details>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

このような場合、ブラウザーは既定の概要文字列(ふつうは「概要」)を使用します。あなたのブラウザーでは次のように表示されます。

概要の提供

この例では <details> ブロックの中で <summary> 要素を使用して、上記の例に概要を追加したものです。次のようになります。

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

この HTML の結果は次のようになります。

折りたたみボックスの作成

<details> ボックスを開いた状態にする例として、単純に論理値の open 属性を追加しましょう。

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

これだけで、次のような結果になります。

表示方法のカスタマイズ

では、いくらか CSS を適用して折りたたみボックスの外見をカスタマイズしましょう。

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

結果

折りたたみウィジェットのカスタマイズ

折りたたみの三角形ウィジェット自身はカスタマイズできますが、これは最近標準化され、広くは対応されていません。さらに、この対応方法については複数の種類があり、標準はそれに基づいて決定されましたので、しばらくの間はカスタマイズのために複数の方法を使用する必要があります。

<summary> 要素は list-style 一括指定プロパティまたは個別指定プロパティ(list-style-type など)で折りたたみウィジェットを三角形から選択したものに変更することができます。

前の例で list-stylenone を設定すると、折りたたみウィジェットを除去することができます。ウィジェットの外見を完全にカスタマイズするために、 list-style にその他の設定を行うこともできます。

しかし、 Chrome はまだこれに対応していませんので、このブラウザーでは外見をカスタマイズするために、非標準の ::-webkit-details-marker 疑似要素を使用する必要があります。

しばらくの間、より広い互換性のために、折りたたみウィジェットの表示を無効にするためには代わりに display: none<summary> に設定する必要があるかもしれません。

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

結果

仕様書

仕様書 策定状況 コメント
HTML Living Standard
<details> の定義
現行の標準  
HTML 5.1
<details> の定義
勧告 Initial definition

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応12 なし1492 なし156
open12 なし149 なし156
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり なし1493 ?6.1 あり
open4 あり なし149 ?6.1 あり

1. In development.

2. Before Firefox 57, there was a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.

3. There is a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yuheiy, SphinxKnight, mfuji09, yyss, hamasaki, ethertank
 最終更新者: yuheiy,