HTML5 detailsタグで簡単に隠し詳細表示欄ができる

2013 年 8 月 13 日 火曜日 by Koh(819 views)

tige
 

HTML5には「details」タグというのがあるらしい、どういうことが出来るかというと、以下のようなサンプルのようなことができる。

 

選抜高校野球出場校一覧(detailsタグのサンプル)

北海道
  1. 北海道
    1. 北照(2年連続5度目)
東北
  1. 岩手
    1. 盛岡大付(3年ぶり3度目)
    宮城
    1. 仙台育英(6年ぶり10度目)
    福島
    1. 聖光学院(2年連続4度目)
    山形
    1. 山形中央(3年ぶり2度目)
関東
  1. 茨木
    1. 宇都宮商(34年ぶり3度目)

 

今までだと、このような動きをさせようとすると、JavaScript等を使ってタグ制御を行っていましたが、detailsタグを使用することで、HTMLのみで実現することができるようになりました。

 

記載したHTMLは以下の通り。

 

<h4>選抜高校野球出場校一覧</h4>
<details>
<summary>北海道</summary>
<ul>
<li>
<details>
<summary>北海道</summary>
<ul>
<li>北照(2年連続5度目)</li>
</ul>
</details>
</li>
</ul>
</details>

 

たったこれだけのHTMLで動きのあるページを作成することができます。

商品詳細や、主だって表に出す必要のない、ちょっとした説明文の記載欄には便利なタグとなりそうです。

 

 







コメントは受け付けていません。


Mobile Site Link