<details>: 詳細折りたたみ要素

HTML の詳細折りたたみ要素 (<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 ロール group
許可されている ARIA ロール なし
DOM インターフェイス HTMLDetailsElement

属性

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

open

この論理属性は、現在 — つまり <details> 要素の内容 — が現在表示されているかどうかを示します。この属性がある場合は詳細が表示され、この属性がない場合は非表示になります。既定では、この属性は存在しないため、詳細は表示されません。

注: 詳細を非表示にするには、この属性を完全に削除する必要があります。この属性は論理属性なので、 open="false" では詳細が表示状態になります。

イベント

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

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

details.addEventListener("toggle", event => {
  if (details.open) {
    /* 要素が開いた方に切り替わった */
  } else {
    /* 要素が閉じた方に切り替わった */
  }
});

単純な折りたたみの例

この例では <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", Calibri, sans-serif;
  width: 620px;
}

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

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

details[open] > summary {
  background-color: #ccf;
}

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

details[open] セレクターを、開いている要素のスタイル付けに使用することができます。

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", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  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

ブラウザーの互換性

BCD tables only load in the browser

関連情報