cman.jpWEBページ作成
広告
<details> 「詳細情報の表示／非表示」[読み方：ディテイルズ]
<details>タグは、詳細情報の表示／非表示を制御する事が出来ます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<details>は、HTML5以降に追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<details> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ インタラクティブコンテンツ パルバブルコンテンツ | フローコンテンツを子要素にもてる場所 | <summary> フローコンテンツ | 不可 |
<details>の属性
【構文】
<details open>
<summary>～見出し～</summary>
<dl>
・・・
</details>
<summary>～見出し～</summary>
<dl>
・・・
</details>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| name="値" | 複数の<details>タグをグループ化するときに指定する | グループ名 |
| open | 詳細情報を開いた状態でページを表示する | "open" |
| グローバル属性 |
| |
| イベント属性 |
| |
<details>のサンプル
リスト形式のサンプル
<details>
<summary>ミニチュアダックスフンド</summary>
<dl>
<dt>体重</dt><dd>4～5Kg</dd>
<dt>体高</dt><dd>15cm前後</dd>
<dt>原産国</dt><dd>ドイツ</dd>
<dt>特徴</dt><dd>狩猟犬として活躍していたダックスを小型化した犬種</dd>
</dl>
</details>
<summary>ミニチュアダックスフンド</summary>
<dl>
<dt>体重</dt><dd>4～5Kg</dd>
<dt>体高</dt><dd>15cm前後</dd>
<dt>原産国</dt><dd>ドイツ</dd>
<dt>特徴</dt><dd>狩猟犬として活躍していたダックスを小型化した犬種</dd>
</dl>
</details>
ミニチュアダックスフンド
- 体重
- 4～5Kg
- 体高
- 15cm前後
- 原産国
- ドイツ
- 特徴
- 狩猟犬として活躍していたダックスを小型化した犬種
<summary>タグを指定しないサンプル
<details>
<dl>
<dt>体重</dt><dd>4～5Kg</dd>
<dt>体高</dt><dd>15cm前後</dd>
<dt>原産国</dt><dd>ドイツ</dd>
<dt>特徴</dt><dd>狩猟犬として活躍していたダックスを小型化した犬種</dd>
</dl>
</details>
<dl>
<dt>体重</dt><dd>4～5Kg</dd>
<dt>体高</dt><dd>15cm前後</dd>
<dt>原産国</dt><dd>ドイツ</dd>
<dt>特徴</dt><dd>狩猟犬として活躍していたダックスを小型化した犬種</dd>
</dl>
</details>
- 体重
- 4～5Kg
- 体高
- 15cm前後
- 原産国
- ドイツ
- 特徴
- 狩猟犬として活躍していたダックスを小型化した犬種
open属性を指定したサンプル
<details open>
<summary>ミニチュアダックスフンド</summary>
<p>狩猟犬として活躍していたダックスを小型化した犬種</p>
</details>
<summary>ミニチュアダックスフンド</summary>
<p>狩猟犬として活躍していたダックスを小型化した犬種</p>
</details>
ミニチュアダックスフンド
狩猟犬として活躍していたダックスを小型化した犬種
name属性を指定したサンプル
<section>
<details name="dog">
<summary>ミニチュアダックスフンド</summary>
<p>狩猟犬として活躍していたダックスを小型化した犬種</p>
</details>
<details name="dog">
<summary>チワワ</summary>
<p>世界最小の犬で、大きな瞳、立ち耳が特徴</p>
</details>
<details name="dog">
<summary>芝犬</summary>
<p>猟犬や番犬として活躍してきた犬種</p>
</details>
</section>
<details name="dog">
<summary>ミニチュアダックスフンド</summary>
<p>狩猟犬として活躍していたダックスを小型化した犬種</p>
</details>
<details name="dog">
<summary>チワワ</summary>
<p>世界最小の犬で、大きな瞳、立ち耳が特徴</p>
</details>
<details name="dog">
<summary>芝犬</summary>
<p>猟犬や番犬として活躍してきた犬種</p>
</details>
</section>
ミニチュアダックスフンド
狩猟犬として活躍していたダックスを小型化した犬種
チワワ
世界最小の犬で、大きな瞳、立ち耳が特徴
芝犬
猟犬や番犬として活躍してきた犬種
留意事項
- <details>タグは、HTML5で追加、削除が複数回あり、最終的に追加されました。
- <summary>～</summary>を指定しない場合、見出し部分に"詳細"が表示されます。
- 属性にopenを指定した場合、詳細リストが開かれた状態でベージが表示されます。
- 属性にnameを指定した場合、１度に開かれる詳細リストは、１つのみです。
- 属性にnameを指定した場合、属性にopenの指定は、同一グループ名の<details>タグに１つのみです。
- 属性にnameを指定する場合、<section>～</section>または<article>～</article>内に、<details>タグを指定します。
| 関連するHTMLタグ | |
|---|---|
| summary | 詳細情報（details）の要約 |
広告