details

details : 詳細折りたたみ要素

HTML 要素リファレンス

画面での表示

概要だったり本論

初めは折りたたまれていて表示されない。

詳細情報を書き込んだり、注釈や説明などにも便利に使用できるかもしれない。

HTML コード

<details>
<summary>概要だったり本論</summary>
<p>初めは折りたたまれていて表示されない。</p>
<p>詳細情報を書き込んだり、注釈や説明などにも
便利に使用できるかもしれない。</p>

</details>

使用例

9月の食材!

野菜
  • 青唐辛子
  • 明日葉
  • 隠元豆
  • 陸蓮根
  • 南瓜
  • 薩摩芋
  • 里芋
  • 椎茸
  • 紫蘇
  • 湿地
  • ズッキーニ
  • 青梗菜
  • 蔓紫
  • 冬瓜
  • 茄子
  • 苦瓜
  • 葉唐辛子
  • 舞茸
  • 松茸
  • 茗荷
果物
  • 無花果
  • 香母酢
  • シークワーサー
  • 酢橘
  • 葡萄・マスカット
お魚
  • 疣鯛
  • 間八
  • 秋刀魚
  • 白子
  • 太刀魚
海産物
  • 鯣烏賊
  • いくら
  • 車海老
  • 毛蟹
  • 昆布
その他
  • ごま

HTML コード

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください