詳細の折り畳み

Updated
2021/8/8 10:47
Author
Jumpei IkegamiJumpei Ikegami
order
8
Markdownドキュメント中で、詳細情報を折り畳んで表示しクリック時に開かせる方法を紹介します。

詳細の折り畳み

ドキュメントを書いていると、分量が多いのでデフォルトでは非表示にしたい詳細情報を念のため残しておきたくなることがあります。そんなときは次の画像のように、クリック時に展開される折り畳み表示を使うと便利です。
notion image
↑esaでの詳細表示(展開前)
notion image
↑esaでの詳細表示(展開後)
ある領域を畳み込み表示するには、<details></details>で囲みます。(もはやMarkdownではなくHTMLタグですね。)
Markdown
展開前の「詳細」というテキストを変更したい場合は、detailsタグの中身の冒頭に<summary></summary>で囲んでタイトルを明記します。
Markdown
notion image
↑タイトルを「一言コメント」に変更後
詳細の中身には、引用文やコードブロックをはじめ、基本的なMarkdown要素を使うことができます。
Markdown
notion image
↑引用文やコードブロックを詳細に含める