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

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

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

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

閉じた <details> ウィジェットのスクリーンショット。黒い左向きの三角形が「System Requirements」のテキストの右側にあります。

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

開いた <details> ウィジェットのスクリーンショット。三角形は下向きになり、「System Requirements」とは何かの詳細説明が表示されています。” means is shown.

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

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

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

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

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

属性

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

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

イベント

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

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

detailsElem.addEventListener("toggle", function(evt) {
  if (detailsElem.open) {
    /* 要素が開いた方に切り替わった */
  } else {
    /* 要素が閉じた方に切り替わった */
  }
}, 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-style-image) を使用します。例えば、折りたたみウィジェットのアイコンは list-style: none と設定することで削除することができます。

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

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 12Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration.
Firefox 完全対応 49
補足
完全対応 49
補足
補足 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.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 49
補足
完全対応 49
補足
補足 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.
Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 あり
openChrome 完全対応 12Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration.
Firefox 完全対応 49IE 未対応 なしOpera 完全対応 15Safari 完全対応 6WebView Android 完全対応 4Chrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 49Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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