【ブログ】折りたたみ表示

動機：必要に応じて見れるようにしたり記事が長くなることを防いだりしたい。

参考

1. markdownで記事を書くとき、コードを折りたたむ方法 - テクめも

2. <details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN

<details>というタグで囲まれた部分が折りたたまれ、折りたたまれたときの文面は<summary>で指定できる。 これらはHTMLのタグらしい。

<details>
<summary>内容の説明など</summary>
折りたたまれる内容。
</details>

と書くと、次のように表示される。

内容の説明など

折りたたまれる内容。

開いた状態をデフォルトにしたければ、最初のタグに「open」を加える。

<details open>
<summary><u>内容の説明など</u></summary>
折りたたまれる内容。
</details>

内容の説明など

折りたたまれる内容。

備忘

<details>タグを使う。