備忘録的プログラミングリファレンス

details タグエレメント

 details タグエレメントは、このタグで囲まれたコンテンツをユーザーによって表示/非表示にできる HTML タグエレメントです。

 見出しは <summary> エレメントを使用します。

details タグエレメント
<details>
	<summary>sunday</summary>
	<p>sundayは代表的な休みの曜日です。現代は必ずしも休みではない方もいます。</p>
</details>
表示例
sunday

sundayは代表的な休みの曜日です。現代は必ずしも休みではない方もいます。

 open属性によって、予め表示しておくこともできます。

 内部コンテンツには多種のエレメントを入れることができます。

- ad -

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
open予め表示しておく。

内部コンテンツ(innerHTML)

動作の確認

JavaScript

 DOM におけるインターフェイスの定義は、HTMLDetailsElement を参照してください。

- ad -

<summary> エレメント

 <summary> エレメントは、details タグエレメントの見出しになるエレメントです。

 <summary> エレメントはdetails タグエレメントの最初の子エレメントであるべきです。

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。

details タグエレメントの見出し

innerText

HTML例

<summary>エレメントのinnerTextで、details タグエレメントの見出しになります。上の動作確認を参照してください。

- ad -