「HTML5」details要素とsummary要素を使用するサンプル
環境
Windows 10 home 64bit
Google Chrome 103.0.5060.66
属性
1.details要素
HTML の詳細折りたたみ要素 (<details>) は、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。
detailsタグの中にsummary要素を入れます。
2.summary要素
HTML の概要明示要素 (<summary>) は、 <details> 要素の内容の要約、キャプション、説明、凡例を表します。
summary要素が 省略された場合、「詳細」を意味する文字が自動で表示されます。
使用例
<!DOCTYPE html> <html> <head> <title>details要素とsummary要素のサンプル</title> </head> <body> <details> <summary>詳細内容</summary> <p>1111111</p> <p>2222222</p> <p>3333333</p> </details> </body> </html>
実行結果
文字「詳細内容」の行をクリックすると詳細情報が表示されます。
矢印マークを押すと詳細情報が閉じます。