詳細と概要

非常に便利な詳細情報とサマリー要素の仕組みと、それらを使用する場所について説明します。

開示ウィジェットは、コンテンツの表示と非表示を切り替えるユーザー インターフェース コントロールです。web.dev でこれを読んでいて、ビューポートの幅が 106 em 未満の場合は、この段落の上にある [このページ] をクリックすると、このセクションの目次が表示されます。このアイコンが表示されない場合は、ブラウザを縮小すると、このページの目次のナビゲーションが開示ウィジェットとして表示されます。

アコーディオン グラフィカル ユーザー インターフェースは、垂直方向に積み重ねられた一連の開示ウィジェットです。アコーディオン UI の一般的なユースケースは、多くのサイトのよくある質問（FAQ）ページです。アコーディオンに関するよくある質問には、表示される質問のリストが含まれています。質問をクリックすると、その質問の回答が展開または「開示」されます。

jQuery には、少なくとも 2009 年からアコーディオン UI パターンが含まれています。JavaScript を使用しない元のアコーディオン ソリューションでは、各よくある質問の質問に <label> を作成し、それにラベル付けしたチェックマークを付けて、チェックマークがオンになると <div> の回答を表示していました。CSS は次のようになります。

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

なぜ歴史があるのか？JavaScript やフォーム制御ハックのないアコーディオンなどの開示ウィジェットは比較的最近追加された機能です。<details> 要素と <summary> 要素は、2020 年 1 月以降、すべての最新ブラウザで完全にサポートされています。セマンティック HTML のみを使用して、魅力的ではありませんが、機能する開示ウィジェットを作成できるようになりました。必要なのは <details> 要素と <summary> 要素だけです。これらの要素は、コンテンツの展開と折りたたみを処理するための組み込み方法です。ユーザーが <summary> をクリックまたはタップするか、<summary> にフォーカスがある状態で Enter キーを離すと、親 <details> の内容の表示が切り替わります。

すべてのセマンティック コンテンツと同様に、デフォルトの機能と外観を段階的に強化できます。この例では わずかな CSS が追加されていますが それ以外は何も追加されていません

これらの Codepen には JavaScript が含まれていません。

表示の切り替え: open 属性

<details> 要素は開示ウィジェットのコンテナです。<summary> は、親 <details> の概要または凡例です。サマリーは常に表示され、親の残りのコンテンツの表示を切り替えるボタンとして機能します。<summary> を操作すると、<details> 要素の open 属性を切り替えることで、セルフラベル付きのサマリー兄弟要素の表示が切り替わります。

open 属性はブール値属性です。存在する場合は、値の有無にかかわらず、すべての <details> コンテンツがユーザーに表示されることを示します。open 属性が存在しない場合は、<summary> の内容のみが表示されます。

open 属性は、ユーザーがコントロールを操作すると自動的に追加または削除されるため、CSS で属性を使用して、状態に応じて要素のスタイルを設定できます。

複数の <details> 要素（それぞれに <summary> の子を持つ）のリストを使用して、アコーディオンを作成できます。HTML で open 属性を省略すると、<details> はすべて折りたたまれて閉じられ、ページの読み込み時に概要の見出しのみが表示され、それぞれの見出しが親 <details> の残りのコンテンツのオープナーになります。HTML に open 属性を含めると、<details> は、ページの読み込み時にコンテンツを表示した状態で展開してレンダリングします。

折りたたみ状態の非表示コンテンツは、DOM の一部でなくても、一部のブラウザでは検索可能ですが、検索できない場合があります。Edge または Chrome で検索すると、検索キーワードを含む詳細が展開されてオカレンスが表示されます。この動作は Firefox や Safari では再現されません。

<summary> は <details> 要素の最初の子である必要があります。これは、ネストされている親 <details> 要素の残りのコンテンツの概要、キャプション、凡例を表します。<summary> 要素のコンテンツには、段落内で使用できる任意の見出しコンテンツ、書式なしテキスト、HTML を使用できます。

概要マーカーを切り替える

前の 2 つの Codepen では、まとめの inline-start 側に矢印があります。開示ウィジェットは通常、回転（またはねじれ）によって開閉状態を示す小さな三角形を画面上に表示され、三角形の横にラベルが付いています。<summary> 要素のコンテンツによって、開示ウィジェットにラベルが付けられます。各セクションの上部にある回転矢印は、<summary> 要素に設定された ::marker です。リストアイテムと同様に、<summary> 要素は list-style 省略形プロパティとその省略形プロパティ（list-style-type など）をサポートしています。CSS を使用して、開示用の三角形のスタイルを設定できます。たとえば、使用するマーカーを三角形から、list-style-image を使用した画像など、その他の記号の種類に変更することができます。

他のスタイルを適用するには、details summary::marker のようなセレクタを使用します。::marker 疑似要素で指定できるスタイルの数には上限があります。::marker を削除して、よりスタイルのわかりやすい ::before に置き換えるのが一般的です。CSS のスタイルでは、open 属性の有無に基づいて、生成されるコンテンツのスタイルが若干変更されます。開示ウィジェットのアイコンを削除するには、list-style: none を設定するか、マーカーのコンテンツを none に設定します。ただし、目視したユーザーに対し、概要コンテンツが有効化時にコンテンツの表示と非表示を切り替える切り替えボタンであることを常に表示できるよう、視覚インジケーターを必ず含めてください。

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

このサンプルでは、デフォルトのマーカーを削除し、生成されたコンテンツを追加して、詳細が閉じられたときに + を作成し、詳細が開いたときに - を作成しています。

詳細ブロックをデフォルトで開く場合は、<details> 開始タグに open 属性を追加します。また、各ダイアログの間にスペースを追加し、生成されたコンテンツで作成されたマーカーの回転を移行することで、外観を改善できます。

エラーの処理方法

<summary> を指定しないと、マーカーと「details」という単語を含むブラウザが自動的に作成されます。この要約はシャドウルートの一部であるため、作成者の CSS 要約スタイルは適用されません。残念ながら、Safari ではキーボードのフォーカス順序に詳細情報は含まれません。

<summary> を含めても、それが <details> の最初の要素ではない場合、ブラウザは要約を適切に表示します。また、要約にリンクやラベルなどのインタラクティブな要素を含めてもエラーにはなりませんが、インタラクティブなコンテンツ内のインタラクティブなコンテンツをブラウザでは異なる方法で処理します。たとえば、サマリーにリンクを含めると、一部のブラウザではサマリーとリンクの両方がデフォルトのタブ順に追加されますが、他のブラウザでは、デフォルトではリンクがフォーカスされません。<summary> 内にネストされている <label> をクリックすると、関連付けられているフォーム コントロールにフォーカスが移るブラウザもあれば、フォーム コントロールにフォーカスを移すブラウザもあれば、<details> の開閉が切り替わるブラウザもあります。

HTMLDetailsElement インターフェース

すべての HTML 要素と同様に、HTMLDetailsElement は HTMLElement からすべてのプロパティ、メソッド、イベントを継承し、open インスタンス プロパティと toggle イベントを追加します。HTMLDetailsElement.open プロパティは、open HTML 属性を反映するブール値で、要素のコンテンツ（<summary> は除く）をユーザーに表示するかどうかを示しています。切り替えイベントは、<details> 要素が開閉されると発生します。このイベントは addEventListener() でリッスンできます。

ユーザーが他の詳細情報を開いたときにその詳細を閉じるためのスクリプトを作成する場合は、removeAttribute("open") を使用して open 属性を削除します。

これは JavaScript を使用する唯一の例です。他の開いている開示ウィジェットを閉じる機能以外は、JavaScript はおそらく必要ありません。

<details> と <summary> はスタイルを細かく設定でき、ツールチップを作成するために使用することもできます。ただし、ネイティブ セマンティクスが一致しないユースケースにこれらのセマンティック要素を使用する場合は、常にユーザー補助機能を維持するようにしてください。 HTML の大部分はデフォルトでアクセス可能。デベロッパーとしての Google の仕事は、Google のコンテンツに誰もがアクセスできることです。

理解度をチェックする

詳細と要約に関する知識をテストします。