details 要素
4.11.1 details 要素
- カテゴリー
- フロー・コンテンツ
- セクショニング・ルート
- インタラクティブ・コンテンツ
- この要素を使うことができるコンテキスト：
- フロー・コンテンツが期待される場所
- コンテンツモデル：
- ひとつの
summary要素の後にフロー・コンテンツが続く - コンテンツ属性：
- グローバル属性
open- DOMインタフェース：
-
interface HTMLDetailsElement : HTMLElement { attribute boolean open; };
details 要素は、ユーザーが追加情報やコントロールを取得できるディスクロージャー・ウィジットを表します。
details 要素を注釈に使うのは適切ではありません。注釈をどのようにマークアップするのかについての詳細は、注釈の節をご覧ください。
この要素の最初の子要素は、もしそれが summary 要素であれば、詳細情報の要約や説明文を表します。summary 要素がなければ、ユーザーエージェントは、それ自身の説明（例："詳細"）を与えるべきです。
open コンテンツ属性は論理属性です。もし存在すれば、それは、その詳細情報をユーザーに表示することになっていることを表します。なければ、その詳細情報は表示されないことになります。
この要素が生成されたとき、この属性が存在しなければ、その詳細情報は非表示にするべきです。この属性が存在していれば、その詳細情報は表示されるべきです。その後、この属性が削除されたら、その詳細情報は非表示となるべきです。もしこの属性が追加されたら、その詳細情報は表示されるべきです。
ユーザーエージェントは、ユーザーが詳細情報を表示するのか非表示にするのかをリクエストできるようにするべきです。その詳細情報の表示リクエストを受けたら、ユーザーエージェントは、その要素の open 属性の値を open にセットしなければいけません。その詳細情報の非表示リクエストを受けたら、ユーザーエージェントは、その要素から open 属性を削除しなければいけません。
次の例は、進捗レポートで技術的な詳細情報を非表示にするために、details 要素が使われているところを示しています。
<section class="progress window"> <h1>Copying "Really Achieving Your Childhood Dreams"</h1> <details> <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details> </section>
次は、デフォルトでいくつかのコントロールを非表示にするために、details 要素が使われているところを示しています：
<details> <summary><label for=fn>Name & Extension:</label></summary> <p><input type=text id=fn name=fn value="Pillar Magazine.pdf"> <p><label><input type=checkbox name=ext checked> Hide extension</label> </details>
リストの中で他の details を組み合わせることで、ユーザーは、小さな見出しの下にあるフィールドを個々に折りたたんだり展開することができるようになります。
これらの例では、summary は、実際の値を表示しているわけではないため、理想とは言えませんが、そのコントロールが何を変更できるのかを、まさに要約しているのです。
※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/interactive-elements.html#the-details-element