details

提供: ASCII.jp HTMLリファレンス

ver.未対応~ ver.未対応~ ver.14~ ver.未対応~ ver.未対応~
意味 詳細部分の表示、非表示
読み方 ディテイルズ

カテゴリー

フロー・コンテンツ
セクショニング・ルート
インタラクティブ・コンテンツ

親にできる要素/カテゴリー

フロー・コンテンツが期待される場所

子にできる要素/カテゴリー

1つのsummary要素と、その後に続くフロー・コンテンツ

<details 属性="値">~</details>

属性 概要
open 論理値 詳細部分を開くかどうか

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 details要素は、内部に詳細な情報を入れ、その情報の表示・非表示をユーザーが切り替えます。

 details要素の最初の子要素であるsummary要素は、details要素の要約を表します。summary要素がない場合は、Webブラウザが要約の代わりに「詳細」などの文字を表示すべきだとされています。要約の部分をクリックすることで、詳細情報の表示・非表示が切り替わります。

 open属性は論理属性で、この属性を指定すると、詳細情報が初期状態で表示されます。

 執筆時点では、主要なWebブラウザーの中では、Google Chrome 14だけがdetails要素を実装しています。

サンプル

(body要素の内部のみ掲載)

<details>
<summary>sample.txt</summary>
<ul>
<li>テキストファイル</li>
<li>700バイト</li>
<li>300文字</li>
</ul>
</details>

サンプル実行画像

 Internet Exlorer 9での表示例です。details要素が実装されていないので、details要素の内容がそのまま表示されます。

 Google Chrome 14での初期状態の表示例です。summary要素の中身(要約)だけが表示されます。

 Google Chrome 14で、要約をクリックしたところです。詳細な情報も表示されます。

Powered by Web Professional

目次