detailsタグとは?|リクエストに応じて詳細情報を表示させる

detailsタグとは?|リクエストに応じて詳細情報を表示させる
リンゴ
博士、表示・非表示が切り替えられる折りたたみ式の詳細情報を表示させたいんですが、これって作るの難しいんですか?
博士
そんなことはないぞ。
<details>タグを使えば簡単じゃ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<details>タグとは

 

<details>

対応ブラウザFirefox / Google Chrome / Safari
分類フロー・コンテンツ / インタラクティブ・コンテンツ / セクショニング・ルート / パルパブル・コンテンツ
利用場所フロー・コンテンツが期待される場所
内容1個のsummary要素に続き、フロー・コンテンツ


 
 
<details>タグは、ユーザーのリクエストに応じて提供される備考や操作方法などの詳細情報であることを表す際に使用します。

例えば、ユーザーがボタンをクリックしたら、折りたたまれていた詳細情報を表示するようにしたいときなどに利用できます。

もし、details要素の子要素としてsummary要素が存在する場合には、<summary>~</summary>で囲まれた部分が、この詳細情報の要約となります。
 
 

使用例

 
 

表示例

音楽ファイルのダウンロード

『sample.mp3』のダウンロード中…
ファイル名:
sample.mp3
ファイル形式:
MPEG Audio Layer-3
ファイル容量:
6.5MB
再生時間:
4分50秒

 
 
博士
詳細情報に階層を持たせたい場合は、以下のようにdetails要素を入れ子にしよう。
 
 

 
 

表示例

音楽ファイルのダウンロード

『sample.mp3』のダウンロード中…
ファイル名:
sample.mp3
ファイル形式:
MPEG Audio Layer-3
より詳細な情報
ファイル容量:
6.5MB
再生時間:
4分50秒

 
 
リンゴ
さらに細かい情報を表示させたいときに便利ですね!
 
 

open属性

open属性を指定すると、詳細情報をあらかじめ表示するよう指定できます。
こちらは、以下のいずれかの形式で指定します。

  • open
  • open=”open”
  • open=””

 
 
この属性が省略された場合は、非表示の状態がデフォルトになります。
 
 

使用例

 
 

表示例

音楽ファイルのダウンロード

『sample.mp3』のダウンロード中…
ファイル名:
sample.mp3
ファイル形式:
MPEG Audio Layer-3
ファイル容量:
6.5MB
再生時間:
4分50秒

 
 

スポンサーリンク

まとめ

ユーザーが追加で得ることのできる備考や操作方法などの詳細情報を表す際は、<details>タグを使用します。
 
 

博士
次は、<summary>タグについても解説するぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








detailsタグとは?|リクエストに応じて詳細情報を表示させる