ホームに戻る
目次 :

HTMLページの折り畳み

ページを折り畳んで表示するには、<details>と <summary>を使用する。

例

基本形

行頭記号をクリックすることで折り畳み・展開を切り替える。初期状態は折り畳み。
HTMLの記述
<details> <summary>折りたたまれる内容のサマリ</summary> <pre> 詳細 詳細 </pre> </details>
表示
折りたたまれる内容のサマリ 
    詳細
    詳細

展開を初期状態とする

detailsタグにopen属性を追加し、<details open>とする。
HTMLの記述
<details open> <summary>折りたたまれる内容のサマリ</summary> <pre> 詳細 詳細 </pre> </details>
表示
折りたたまれる内容のサマリ 
    詳細
    詳細

summary タグの省略

summaryタグを省略した場合、デフォルトのサマリが付与される。
(日本語環境では「詳細」と表示される。)
HTMLの記述
<details> <pre> TTT SSS </pre> </details>
表示
    TTT
    SSS

制約

summaryタグに見出し (h1～h6) を含めることはできない。