【HTML Living Standard】details要素の使い方
details要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
detailsオブジェクトは、ユーザーがクリックして内容の表示・非表示を切り替えられるウィジェットを作成するためのHTML要素を表すオブジェクトです。この要素は、ウェブページ上で初期状態では隠しておきたいが、ユーザーの要求に応じていつでも参照できるようにしたい詳細情報を提供する場合に非常に有用です。
通常、details要素は、その内容の概要を示すsummary要素と組み合わせて使用されます。summary要素はユーザーがクリックできる見出しとして機能し、クリックすることでdetails要素内に含まれる詳細なコンテンツが表示されたり、再び隠されたりします。これにより、ページ全体の初期表示時の情報量を抑えつつ、必要な情報へアクセスする手段を提供できます。
デフォルトでは閉じられた状態で表示されますが、open属性をdetails要素に付与することで、ページ読み込み時に最初から開いた状態で表示させることも可能です。例えば、よくある質問とその回答、追加情報、またはウェブアプリケーションにおける複雑な設定オプションなどを簡潔に提示し、ユーザーインターフェースの整理と効率的な情報アクセスを実現するために利用されます。これは、情報過多になりがちな現代のウェブページにおいて、ユーザーの利便性を高める重要な機能の一つです。
構文(syntax)
1<details> 2 <summary>概要情報</summary> 3 <p>ここに詳細なコンテンツが入ります。</p> 4</details>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML details open属性で初期表示する
1<!DOCTYPE html> 2<html> 3<head> 4 <title>HTML details open example</title> 5</head> 6<body> 7 <!-- details要素は、クリックで表示・非表示を切り替えられるコンテンツブロックを作成します。 --> 8 <!-- open属性を指定すると、ページ読み込み時にコンテンツブロックが初期状態で開いた状態になります。 --> 9 <details open> 10 <!-- summary要素は、details要素のタイトルまたは概要を定義し、表示・非表示の切り替えトリガーとなります。 --> 11 <summary>詳細情報はこちら（初期表示）</summary> 12 <p>これは、`details`要素内に含まれる詳細コンテンツです。</p> 13 <p>このセクションは`open`属性により、ページ読み込み時に既に展開された状態で表示されます。</p> 14 </details> 15</body> 16</html>
HTMLのdetails要素は、クリックすることで表示・非表示を切り替えられる、開閉可能なコンテンツブロックを作成する要素です。ウェブページ上で情報を整理し、ユーザーが必要な時にだけ詳細情報を表示するといった、インタラクティブなユーザーインターフェースを構築する際に利用されます。
この要素は通常、内部にsummary要素を含めます。summary要素は、details要素のタイトルや概要を定義し、ユーザーがクリックして詳細コンテンツの表示・非表示を切り替えるためのトリガー（きっかけ）となります。
サンプルコードでは、<details open>と記述されています。ここで指定されているopen属性は、ブール属性と呼ばれる特殊な属性で、属性値を持たずに記述するだけで効果を発揮します。このopen属性が存在する場合、ページが読み込まれた際にdetails要素内のコンテンツが初期状態で開いた（展開された）状態で表示されるようになります。逆にopen属性がなければ、初期状態ではコンテンツは閉じられた状態で表示されます。
HTMLの要素は、プログラミング言語の関数のように直接的な「引数」や「戻り値」を持つことはありません。代わりに、要素の振る舞いや表示方法を変更するために「属性」を使用します。details要素も同様に、open属性を通じてその初期表示状態を制御します。この機能により、ウェブページのユーザビリティが向上し、情報を効果的に提示できます。
details要素は、折りたたみ可能なコンテンツを作成する際に使用します。内部には必ずsummary要素を配置し、表示切り替えのトリガーとなる見出しを定義してください。summary要素がない場合、ブラウザのデフォルト表示となり意図しない見た目になることがあります。
open属性は、ページ読み込み時にdetails要素の内容を初期状態で展開しておくためのもので、属性値を指定せず記述するだけで有効になります。ユーザーがsummaryをクリックすると、内容の表示・非表示が自動で切り替わります。
この要素は、補足情報など、デフォルトで隠れていても問題ないコンテンツに適用するのが適切です。JavaScriptを使わずに基本的な折りたたみ機能とアクセシビリティを提供しますが、開いているコンテンツが多すぎるとユーザー体験を損なう場合があるため、その点にご注意ください。
HTML details/summaryで開閉コンテンツを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML details要素のサンプル</title> 7</head> 8<body> 9 <h1>商品情報</h1> 10 11 <!-- details要素は、開閉可能なウィジェットを作成します。 --> 12 <!-- デフォルトでは閉じられた状態です。クリックで内容が表示されます。 --> 13 <details> 14 <!-- summary要素は、detailsウィジェットの常に表示される見出し（タイトル）を提供します。 --> 15 <summary>商品Aの詳細情報</summary> 16 <!-- summary要素の後に続くコンテンツが、detailsが開かれたときに表示されます。 --> 17 <p> 18 商品名: スマートフォンX<br> 19 価格: 99,800円<br> 20 特徴: 高性能カメラ、長持ちバッテリー、防水機能 21 </p> 22 <ul> 23 <li>色: スペースグレー</li> 24 <li>ストレージ: 256GB</li> 25 <li>保証期間: 1年間</li> 26 </ul> 27 </details> 28 29 <br> 30 31 <!-- open属性を追加すると、ページ読み込み時に最初から開いた状態で表示されます。 --> 32 <details open> 33 <summary>商品Bの詳細情報</summary> 34 <p> 35 商品名: ワイヤレスイヤホン<br> 36 価格: 12,000円<br> 37 特徴: ノイズキャンセリング、軽量デザイン、連続再生10時間 38 </p> 39 </details> 40 41</body> 42</html>
このサンプルコードは、HTMLの<details>要素と<summary>要素の基本的な使い方を示しています。<details>要素は、クリック操作によって表示内容を隠したり表示したりできる、開閉可能なウィジェットを作成します。これにより、情報を整理してユーザーが必要な時だけ詳細な内容を確認できるようにすることが可能です。
<details>要素の中には、<summary>要素が配置されます。この<summary>要素に記述された内容が、常に表示されるウィジェットの見出し（タイトル）として機能します。そして、<summary>要素の後に続く<p>や<ul>などのコンテンツが、ウィジェットが開かれたときに表示される詳細情報となります。
デフォルトでは、<details>要素は閉じられた状態で表示されますが、open属性（例: <details open>) を追加することで、ページ読み込み時に最初から開いた状態で表示させることができます。この<details>要素自体に引数や戻り値はありません。シンプルながらも、ウェブページ上で情報の表示を効率化し、ユーザーインターフェースを向上させるための強力な要素です。
details要素は、クリックで開閉できる詳細情報を表示する際に使用します。必ず、最初に表示される見出しとなるsummary要素を子要素として含めてください。summary要素がない場合や、details要素内の先頭に配置されていない場合、正しく動作しない可能性があります。開閉されるコンテンツはsummary要素の後に記述します。ページ読み込み時に最初から開いた状態にしたい場合は、details要素にopen属性を追加してください。この要素は情報を隠すためではなく、補足的な詳細情報を整理して表示するために利用するのが適切です。ブラウザのデフォルトスタイルに依存するため、デザインを調整する場合はCSSで個別に設定する必要があります。また、キーボード操作やスクリーンリーダーにも配慮されていますが、summaryの内容はユーザーが直感的に理解できるよう具体的に記述することが重要です。