詳細と概要

非常に有用な詳細情報とサマリー要素の仕組みと、 使用します。

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

アコーディオン グラフィカル ユーザー インターフェースは、縦方向に積み重ねられた一連の 情報開示ウィジェット。アコーディオン 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> をクリックまたはタップするか、Enter キーを <summary> がフォーカスされると、親 <details> のコンテンツの表示が切り替わります。

他のセマンティック コンテンツと同様に、デフォルトの機能と外観を段階的に拡張できます。今回の例では、 CSS が追加されましたが、それ以外は何もありません。

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

表示設定の切り替え: open 属性

<details> 要素は開示ウィジェット コンテナです。<summary> は、親 <details> の概要または凡例です。「 サマリーは常に表示され、親の残りのコンテンツの表示を切り替えるボタンとして機能します。対話 <summary> の場合、<details>' を切り替えて、自己ラベル付けされたサマリーの兄弟要素の表示が切り替わります要素の open 属性を指定します。

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

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

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

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

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

概要マーカーの切り替え

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

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

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

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

詳細ブロックをデフォルトで開くには、開始 <details> タグに open 属性を指定します。スペースを追加して 生成コンテンツを使って作成されたマーカーの回転を移行させることで、見た目を整えることができます:

エラーの処理方法

<summary> を指定しなかった場合、ブラウザはマーカーと「details」という単語を含むタグを作成します。この概要 は Shadow ルートの一部であるため、作成者の CSS サマリー スタイルは適用されません。残念ながら Safari には キーボードのフォーカス順序の詳細を確認します。

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

HTMLDetailsElement インターフェース

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

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

これは JavaScript の唯一の使用例です。JavaScript はおそらく、他の JavaScript 関数を 開かれた開示ウィジェットです

<details> と <summary> はスタイルを細かく指定でき、ツールヒントの作成にも使用できます。 ただし、ネイティブ セマンティクスが一致しないユースケースでこれらのセマンティック要素を使用する場合は、必ずアクセシビリティを維持してください。 HTML のほとんどはデフォルトでアクセスできます。デベロッパーとしての Google の仕事は、コンテンツへのアクセス性を確保することです。

理解度をチェックする

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