タグ: HTML

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;
}

情報元

• MDN Web docs
• 旬の食材カレンダー