<details>要素の使い方・サンプルコード
Sara
目次
<details>
<details>要素は、開閉ができる折りたたみ式のウィジェットを作成します。
<summary>要素を子要素に置くと、ウィジェットのラベルを指定することができます。
デモ：details要素
* IE, Edge は非対応
属性
open
ウィジェットを開いた状態にしておくことができます。論理属性です。
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
例① summary 要素を使用しない場合
HTML
<details>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</details>実行結果
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
例② summary 要素を使用する場合
HTML
<details>
<summary>注意事項</summary>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</details>実行結果
注意事項
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
例③ open 属性を使って開いた状態にしておく場合
HTML
<details open>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</details>実行結果
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
対応ブラウザ
関連するタグ
- <summary>：details 要素の要約・キャプション
Subscribe
0 Comments
古い順
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
