details要素の使い方

HTMLのdetails要素は、追加の説明や操作項目を開いたり閉じたりできる、標準の開閉部品です。JavaScriptを使わなくても、ブラウザーの機能で操作できます。

先に結論

最小例

<details>
  <summary>詳しい説明を見る</summary>
  <p>ここに追加の説明を書きます。</p>
</details>

summaryをクリックまたはキーボードで操作すると、その下の内容が表示・非表示になります。

最初から開いておく

open属性を付けると、ページを開いた最初から内容を表示します。openはboolean属性なので、open="false"と書いても属性があるため開いた状態になります。閉じた状態にしたいときは、属性を省略します。

<details open>
  <summary>最初から表示する説明</summary>
  <p>ページを開いたときから見える内容です。</p>
</details>

summaryには短く分かりやすい名前を付ける

summaryは、閉じた状態でも利用者が内容を想像できる見出しにします。「詳しく見る」だけでなく、「送料と返品について」のように、何が開くのかを具体的に書くと読みやすくなります。

summaryはdetailsの最初の子要素に置きます。開閉に関係する見出しと、開いた後の内容を分けて書きましょう。

複数の項目を1つずつ開く

複数のdetailsに同じnameを付けると、同じグループの中で一度に1つだけ開く形にできます。複数の説明を同時に見たい場合は、nameを付けずに使います。

読みやすく、使いやすくするコツ

• summaryだけで、開くと何が読めるか分かるようにする。
• 重要な説明や必須の操作を、閉じた中だけに置かない。
• キーボードでも開閉できることを確認する。
• 見た目を変える前に、標準の開閉表示が内容を伝えられるか確認する。
• タブ、メニュー、ダイアログなど、別の役割の部品に置き換えない。

よくある間違い

• open="false"と書けば閉じると思う。boolean属性では、値ではなく属性の有無が状態を決めます。
• summaryを省略して、開閉する内容だけを書く。ブラウザーが補助的な見出しを出すことはありますが、利用者に伝わる名前を自分で用意するほうが安全です。
• CSSで非表示にした要素をクリックで開く仕組みを自作する。キーボード操作や状態の伝達まで考える必要があるため、まず標準のdetailsを検討します。

Atlasで詳しく確認する

content model、summaryの判定、openとtoggle、nameによる排他的グループ、ブラウザー実装、アクセシビリティの確認範囲は、Yugien Atlasのdetails要素ページで詳しく整理しています。