HTML講座 / detailsとsummaryで開閉できる説明を作る

detailsの中にsummaryを置くと、ブラウザー標準の開閉式の説明を作れます。summaryが操作用の見出し、残りが開いたときの内容です。初期状態で開く場合はopen属性を付けます。

基本の開閉を作る

次のコードをHTML文書のbodyへ入れて開きます。最初は「View opening hours」だけが見え、選択すると説明が現れ、もう一度操作すると閉じます。

<details>
  <summary>View opening hours</summary>
  <p>We are open Monday through Friday, 9 a.m. to 6 p.m.</p>
</details>

summaryはdetailsの最初に置きます。単純な開閉だけならスクリプトは必要ありません。矢印や枠などの表示はブラウザーやCSSで変わっても、文言から内容を判断でき、操作できることが大切です。

最初から開いた状態にする

openを付けると初期状態で展開され、利用者は閉じたり再び開いたりできます。

<details open>
  <summary>Delivery information</summary>
  <p>Arrival times vary by area.</p>
</details>

openは真偽属性なので、open="false"でも属性が存在し、開いた状態です。閉じた状態にしたければ属性を取り除きます。真偽属性の規則と同じです。全員が読むべき重要な条件を、任意の補足のように閉じ込めないようにします。

何が開くか分かるsummaryを書く

複数並べる場合は、それぞれが何を説明するかを文言で区別します。「詳細」だけを繰り返すと、必要な項目を見つけにくくなります。FAQの回答を開閉させる使い方もできますが、短くすぐ必要な回答なら、そのまま表示した方が読みやすい場合もあります。

開閉は読者に追加の操作を求めます。装飾として多用せず、必要な説明を探しやすくする場合に使います。構造はMDNのdetailsで確認できます。

キーボードと初期状態を比較する

ファイルを再読み込みし、openなしとopenありを比較します。Tabでsummaryへ移動してフォーカスが見えるかを確認し、EnterとSpaceを別々に使って開閉します。CSSを追加した場合は同じ試験を繰り返します。

この基本例ではsummaryに競合するリンクやボタンを入れず、文章で内容を示します。標準の要素を使っていても、複雑な独自操作を加えた場合のフォーカスは別途確認が必要です。MDNのsummaryに使用上の条件があります。

開閉できない場合

summaryがdetailsの中にあるか、閉じタグが正しいかを確認します。CSSでクリック領域やフォーカスの表示を消していないかも調べます。一つずつ追加した変更を戻すと、原因を絞り込めます。操作全体の確認はHTMLアクセシビリティの実習と合わせて行ってください。