【HTML】detailsタグとsummaryタグで開閉可能な詳細を作成する方法の解説

このページについて

このページではHTMLで使えるdetailsとsummaryの使い方を解説しています。

detailsはユーザーが開閉可能なウィジェット的なものを作成する機能を持っています。より正確に書くと、「ユーザーが開閉可能な詳しい説明」となります。

他にsummaryも使いますが、この2つはセットで使うことが多いです。summary自体はdetails内での項目名や見出しという感じの機能を担っています。この見出し部分をクリックすることで説明部分を開閉できるようになります。

detailsはdlタグやulタグなどと同じように、全体を定義するだけです。そのため基本的にはこんな感じで基礎を作成します。

<details>

</details>

これだけだとなんの意味も無いので中に要素を追加していきます。ここで出番となるのがsummaryです。これもタグで開始と終了どちらも必要です。

<details>

<summary>タンヤオ</summary>

<p>麻雀の役の1つ。数字の2から8のみで構成すると付く。</p>

</details>

実際にはこんな感じでsummary→pタグという順番で見出しと詳細を定義します。実際にブラウザで表示すると以下のようになります。

タンヤオ

麻雀の役の1つ。数字の2から8のみで構成すると付く。

タンヤオの部分をクリックすることで、pタグで書いた詳細部分が出てくると思います。このdetailsとsummaryはセットで使用するということだけ覚えておけば、どんな場面でも活躍する便利な機能と言えそうですね。

ちなみにJavascriptは一切使用せずともこの開閉システムは使えます。1つのdetailsに対して1つの用語の説明しか出来ず、複数書くと最初の1つのみ正常に機能します。なので多少面倒でも複数の解説を必要とする場合、その数だけdetailsを書きましょう。

detailsで使える属性は1つです。

open	詳細部分を最初から開く時に使用

これだけなので難しいことはありませんね。ちなみにこのopenという属性はdetailsでしか使用しません。

書く位置はdetailsに添えるだけです。オンオフを切り替えるだけなので、細かい値などはありません。

<details open>

<summary>国士無双</summary>

<p>数字の1と9と字牌を1種類ずつ集めると成立する役満。</p>

</details>

こんな感じで添えるだけでOKです。実際にブラウザで見てみると、クリックしていないにも関わらず説明部分が表示されているのがわかります。

国士無双

数字の1と9と字牌を1種類ずつ集めると成立する役満。

そしてdetailsとsummaryの両方に共通していることですが、どちらもグローバル属性とイベント属性をサポートしています。summaryは固有の属性などはありません。

detailsは開閉可能な説明用のリストを定義します。ただし中身までは定義しないため、summaryで見出しを、pタグで説明部分を定義する必要があります。