details : 詳細折りたたみ要素
HTML 要素リファレンス
画面での表示
概要だったり本論
初めは折りたたまれていて表示されない。詳細情報を書き込んだり、注釈や説明などにも便利に使用できるかもしれない。 ソースコード
<details>
<summary>概要だったり本論</summary>
<p>初めは折りたたまれていて表示されない。</p>
<p>詳細情報を書き込んだり、注釈や説明などにも
便利に使用できるかもしれない。</p>
</details>
使用例
9月の食材!
野菜
- 青唐辛子
- 明日葉
- 隠元豆
- 陸蓮根
- 南瓜
- 薩摩芋
- 里芋
- 椎茸
- 紫蘇
- 湿地
- ズッキーニ
- 青梗菜
- 蔓紫
- 冬瓜
- 茄子
- 苦瓜
- 葉唐辛子
- 舞茸
- 松茸
- 茗荷
果物
- 無花果
- 香母酢
- 栗
- シークワーサー
- 酢橘
- 梨
- 葡萄・マスカット
お魚
海産物
その他
ソースコード
<h4>9月の食材!</h4>
<details>
<summary>野菜</summary>
<ul>
<li>青唐辛子</li>
<li>明日葉</li>
<li>隠元豆</li>
<li>陸蓮根</li>
<li>南瓜</li>
<li>薩摩芋</li>
<li>里芋</li>
<li>椎茸</li>
<li>紫蘇</li>
<li>湿地</li>
<li>ズッキーニ</li>
<li>青梗菜</li>
<li>蔓紫</li>
<li>冬瓜</li>
<li>茄子</li>
<li>苦瓜</li>
<li>葉唐辛子</li>
<li>舞茸</li>
<li>松茸</li>
<li>茗荷</li>
</ul>
</details><details>
<summary>果物</summary>
<ul>
<li>無花果</li>
<li>香母酢</li>
<li>栗</li>
<li>シークワーサー</li>
<li>酢橘</li>
<li>梨</li>
<li>葡萄・マスカット</li>
</ul>
</details><details>
<summary>お魚</summary>
<ul>
<li>疣鯛</li>
<li>鰯</li>
<li>鰹</li>
<li>間八</li>
<li>鮭</li>
<li>秋刀魚</li>
<li>白子</li>
<li>太刀魚</li>
</ul>
</details><details>
<summary>海産物</summary>
<ul>
<li>鮑</li>
<li>鯣烏賊</li>
<li>いくら</li>
<li>車海老</li>
<li>毛蟹</li>
<li>昆布</li>
</ul>
</details><details>
<summary>その他</summary>
<ul>
<li>ごま</li>
</ul>
</details>
CSS
details {
clear: both;
}
details ul {
list-style-type: none;
}
details ul > li {
float: left;
width: 200px;
}
情報元
Details – HTML Code.
コメントを残す