HTML <details> タグ

前へ 完全なHTM リファレンス 次へ

<details> 要素の使用:

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
Try it Yourself ❯

定義と用法

<details> タグは、ユーザの要求に応じて、表示したり非表示にすることのできる追加の詳細を指定します。

<details> タグは、ユーザが開いたり閉じたりすることのできる、インタラクティブなウィジェットの 作成に使用することができます。コンテンツのソートは、<details> タグの中に置くことができます。

open 属性が設定されていない場合、<details> 要素のコンテンツは表示されません。


ブラウザ・サポート

表中の数字は、要素を完全にサポートした最初のブラウザ・バージョンを指定しています。

要素
<details> 12.0 Not supported 48.0 6.0 15.0

HTML 4.01 と HTML5 の相違点

<details> タグは、HTML5で新しく追加されました。


チップスと注意事項

チップ: <summary> タグは、 details に表示する見出しを指定するために使用します。見出しは、details の表示/非表示を切替えるためクリックすることができます。


属性

= HTML5 で新規追加。

属性 説明
open open details をユーザに表示(オープン)するように指定する

グローバル属性

<details> タグは、HTML のグローバル属性もサポートします。


イベント属性

<details> タグは、HTML のイベント属性もサポートします。


関連ページ

HTML DOM リファレンス:Details オブジェクト


デフォルトの CSS 設定

ほとんどのブラウザは、次のデフォルト値を使用して <details> 要素を表示しています:

details {
    display: block;
}


前へ 完全なHTM リファレンス 次へ