Help us understand the problem. What is going on with this article?

QiitaやGitHubのコメントで折りたたみ要素を作る方法

More than 1 year has passed since last update.

GitHubのissuesに長いエラーコードを載せたいときや、Qiitaで長いソースコードを参考までに載せたいときなどに折りたたみ要素を作りたい場合があります。

折りたたみ要素は<details>というHTML5タグを利用すると作成できます。

マークダウンのファイルでもHTMLタグを識別してくれるため、例えば以下のようなソースコードを記載すると以下のような表示になります。

ソースコード

<details>
<summary>折りたたみ部分のタイトル</summary>
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
</details>

なお、GitHub上での場合は上記のソースコードではうまく改行されません。
改行をするためには以下のようにpreタグとcodeタグで囲います。

<details>
<summary>折りたたみ部分のタイトル</summary>
<pre>
<code>
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
</code>
</pre>
</details>

実際の表示内容


折りたたみ部分のタイトル
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分
折りたたまれる詳細情報部分

by @nishina555

nishina555
Webデベロッパーです。現在は業務委託で仕事をしています。サーバーサイドがメイン。Rails/React/Redux/Node/GraphQL/AWS。大学院時代は自然言語処理の研究を行っていました。
https://nishinatoshiharu.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away