details／summary要素

details要素は、詳細情報を提供する開閉式のウィジェットを表す。
このウィジェットはデフォルトでは閉じられた状態になっていて、ユーザーのリクエストに応じて表示されることになる。
この要素内の先頭にsummary要素を配置すると、詳細情報のキャプション等を示すことができる。

details／summary要素のブラウザ対応状況

<details open>
  <summary>詳細1を見る</summary>
  <p>詳細な情報1。</p>
</details>
<details>
  <summary>詳細2を見る</summary>
  <p>詳細な情報2。</p>
</details>
<details>
  <summary>詳細3を見る</summary>
  <p>詳細な情報3。</p>
</details>

open属性について

open属性は、詳細情報が表示された状態を指定する。この属性が省略された場合は、非表示の状態がデフォルトになる。
CSSのセレクタはdetails[open]というような指定になる。

summary要素の使用について

summary要素を使用することで、詳細情報のキャプション、要約、説明文などを示すことができる。
この要素を使用する場合は、details要素内の先頭に配置する。
summary要素を省略した場合は、キャプション部分に詳細と表示される。（Chrome、Edge、Firefoxで確認）

details要素の組み合わせ

詳細情報に階層を持たせたい場合は、以下のようにdetails要素を入れ子にする。

<details>
  <summary>詳細を見る</summary>
  <p>詳細な情報</p>
  <details>
    <summary>より詳しく見る</summary>
    <p>より詳細な情報</p>
  </details>
</details>

summaryタグのデフォルト黒三角を消す

デフォルトの状態では、黒い三角がアイコンとして表示される。この黒三角を消す場合、ブラウザによって手法が違うので注意する。

/* Firefox、Chrome、Edgeの場合 */
details summary {
  list-style: none;
}

/* Safari、Operaの場合 */
details summary::-webkit-details-marker {
  display: none;
}

/* ついでにカーソルがポインターになるようにしておく */
details summary {
  cursor: pointer;
}
inserted by FC2 system