Markdownで折りたたみを作るには：detailsタグとsummaryタグ。

構文

折りたたみセクションは、ふつうのHTML要素です。<details>が入れ物、<summary>がクリックできる行で、summaryの後ろにあるものは、読み手がクリックするまで隠れています。開閉はブラウザ（またはMarkdownアプリのWebビュー）が行うので、スクリプトも、新しく覚える構文もありません。

<details>
<summary>Click to expand</summary>

Hidden text goes here.

</details>

閉じているときは小さな三角とClick to expandの文字が見え、クリックすると三角が回って本文が現れます。GitHubのREADME、Issue、プルリクエストのコメントでも、長いログや補足のメモにこの同じ方法が使われています。

空行のルール

<details>ブロックの中のMarkdownは、HTMLタグとの間に空行があるときだけ処理されます。CommonMarkはHTMLブロックを次の空行までと読み取り、生のHTMLとしてそのまま通すためです。空行がないと、**bold**やリストが文字のまま表示されます。

<details>
<summary>Broken</summary>
- this list is not turned into a list
</details>

<details>
<summary>Works</summary>

- this one is a list

</details>

</summary>の後ろと</details>の前に、それぞれ空行を入れます。summaryの行自体もHTMLなので、ここではMarkdownではなく<b>bold</b>や<code>code</code>を使います。

最初から開いておく

open属性を付けると、セクションが開いた状態で始まります。読み手は閉じることもできます。

<details open>
<summary>Prerequisites</summary>

Node 20 or later.

</details>

使いすぎないでください。すべてが最初から開いているページに折りたたむ意味はなく、すべてが閉じているページは役に立つ部分を隠してしまいます。目安は、答えは見える状態にし、長い出力、設定ファイル全体、エッジケースの一覧といった裏付けを畳むことです。

例：コード、入れ子、長いリスト

セクションの中のコードブロックにも、ほかのMarkdownと同じように空行が必要です。

<details>
<summary>Full config</summary>

```json
{ "retries": 3, "timeout": 30 }
```

</details>

セクションは入れ子にできます。内側をインデントしても構いませんが、大事なのは空行です。

<details>
<summary>Troubleshooting</summary>

<details>
<summary>The app does not start</summary>

Check the log in the console.

</details>

</details>

読み手に見えるセクションは次のとおりで、クリックするまで閉じています。

Show the full log

Everything here is hidden until the title is clicked.

折りたたみを使う場面

畳む価値があるのは、読み手がセクションを開かなくても作業を終えられるときです。長いコマンド出力、設定ファイル全体、オプションの表、古いバージョンの変更履歴、まれな問題のトラブルシューティング手順などが向いています。多くの読み手に必要な短い補足は、見える状態のままにします。

バグ報告やプルリクエストの説明に長いログを貼るときも、セクションが役立ちます。読み手は何が起きたかの要約を先に見て、必要なときだけログを開けます。中身が分かるように、Build log (412 lines)のように具体的なタイトルを付けてください。

よくある間違い

• 空行がない。中のテキストに生のMarkdownが表示されます。summaryの後ろと閉じタグの前に空行を入れます。
• summaryの中にMarkdownを書く。そこではHTMLタグを使います。
• 閉じタグがない。以降のすべてがセクションの中に入ってしまいます。
• HTMLを取り除くアプリ。信頼できないタグを除去するレンダラーでは、テキストが単に見えた状態になります。どこでも動かす必要があるなら、実際に読まれる場所でテストしてください。
• summaryの中の見出し。多くのアプリでは、その見出しがアウトラインに表示されません。見出しはセクションの上に置いてください。

折りたたんだテキストもファイルの中にあるので、検索や差分には含まれますが、一度もクリックしない読み手は目にしません。警告のような大事なことは隠さないでください。

動作を確認する

セクションを確認するには、HTMLを描画するリーダーでファイルを開きます。DotMDは<details>をクリックで開くセクションとして表示し、中のMarkdownも整形されます。DotMD EditorではInsert → Collapsible Sectionがタグを書いてくれます。閲覧は無料です。

Markdownの折りたたみセクションに関するよくある質問

その他の質問