<details> - 略語

トップ > HTMLリファレンス > <details>

概要

項目説明
形式<details>~</details>
サポート[非推奨] / H5d
タグの省略開始タグ:必須、終了タグ:必須
包含可能要素summaryインライン要素

説明

details は、普段は非表示にされているが、ユーザが詳細表示したいときだけ表示される要素を記述します。通常は、サマリのみが表示され、ブラウザがサポートする何らかの詳細表示ボタンを押した際に詳細情報が表示されます。

HTML5 のワーキングドラフトで採用が検討されていましたが、HTML5 最終案では破棄されました。

属性

【固有属性】
属性意味
openH5d。この属性を指定すると、ページを開いた際に、詳細情報がデフォルトで表示されるようになります。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<details>
 <summary>検索オプション</summary>
 <div><label><input type="checkbox" name="ch1">日本語サイトのみ</label></div>
 <div><label><input type="checkbox" name="ch2">セーフサーチ無効</label></div>
</details>
表示
▼検索オプション
※JavaScriptで擬似的に表現しています。「▼検索オプション」をクリックしてみてください。

関連項目

<summary>

Copyright (C) 2011-2015 杜甫々
初版:2011年6月4日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/details.htm