MDUtil

Markdownの折りたたみ

Markdownに折りたたみの記法はありませんが、HTMLの <details> タグはGitHubや多くのエディタで使えます。書き方、必要な空行、アプリ独自の折りたたみ機能を説明します。

要点

Markdownで折りたたみを作るには？

内容を <details> で囲み、常に表示するタイトルを <summary> に書きます。</summary> のあとに空行を入れると、中のMarkdownが表示されます。読者はタイトルをクリックして開き、タグに open を付けると最初から開いた状態になります。

Markdown
<details>
<summary>クリックして開く</summary>

折りたたんだ内容にも **Markdown** が使えます。

</details>

表示結果

クリックして開く

折りたたんだ内容にも Markdown が使えます。

折りたたみの例

表示結果のタイトルをクリックすると、開いたり閉じたりできます。

最初から開いておく

open 属性を付けると、読者が閉じるまで開いた状態で表示されます。

Markdown
<details open>
<summary>更新内容</summary>

- 起動が速くなりました
- 書き出しメニューを追加

</details>

表示結果

更新内容
  • 起動が速くなりました
  • 書き出しメニューを追加

コードを折りたたむ

長いログやコードは折りたたみに向いています。コードブロックの前後には空行を入れます。

Markdown
<details>
<summary>ビルドログを表示</summary>

```text
[12:01] ビルド開始
[12:03] ビルド完了
```

</details>

表示結果

ビルドログを表示 
[12:01] ビルド開始
[12:03] ビルド完了

入れ子の折りたたみ

折りたたみの中に、それぞれタイトルを持つ別の折りたたみを入れられます。

Markdown
<details>
<summary>第1章</summary>

<details>
<summary>1.1節</summary>

1.1節の本文。

</details>

</details>

表示結果

第1章
1.1節

1.1節の本文。

タイトルの書式

<summary> の行はHTMLなので、<b> や <code> などのタグを使います。ここではMarkdownは解釈されません。

Markdown
<details>
<summary><b>答え</b>（クリックで表示）</summary>

答えは **42** です。

</details>

表示結果

答え（クリックで表示）

答えは 42 です。

空行がない場合

</summary> のあとに空行がないと、内容はHTMLの一部として扱われ、Markdownがそのまま表示されます。

Markdown
<details>
<summary>開いてください</summary>
**これはそのまま表示されます**
</details>

表示結果

開いてください **これはそのまま表示されます**

Obsidian：折りたためるコールアウト

Obsidianでは、種類のあとに - を付けたコールアウトが閉じた状態で表示され、クリックで開きます。

Markdown
> [!faq]- パスワードを再設定するには？
> 設定を開き、「パスワードを再設定」を選びます。

Obsidianだけの書き方です。ほかのMarkdownアプリでは表示が異なるため、プレビューはありません。

各サービスでの対応状況

<details> はHTMLを残すアプリで使えます。独自の折りたたみ機能を持つアプリもあります。

サービス対応補足
GitHub / GitLab対応ファイル、Issue、コメントで <details> が使えます。
VS Code / Typora対応プレビューで <details> を開閉できます。
Obsidian違いあり<details> は表示されますが、中のMarkdownは表示されません。本来の方法は > [!note]- のようなコールアウトです。
Notion違いあり<details> は使えず、> と空白でトグルリストになります。
Discord / Slack非対応折りたたみはなく、Discordでは ||文字|| でネタバレとして隠せます。

よくある質問

GitHubで折りたたみを作るには？

<details> と <summary> の行を書き、</summary> のあとに空行を入れると中のMarkdownが表示されます。README、Issue、プルリクエスト、コメントで使えます。

<details> の中のMarkdownが表示されないのはなぜですか？

</summary> のあとと </details> の前に空行を入れます。空行がないと、内容はHTMLの一部としてそのまま表示されます。

最初から開いた状態にするには？

タグに open を付けます：<details open>。

コードブロックやリストを入れられますか？

入れられます。上の例のように前後に空行を入れます。

Discordでネタバレを隠すには？

文字の前後に縦線を2本ずつ書きます：||ネタバレ||。読者がクリックすると表示されます。

<details> はアクセシビリティに配慮されていますか？

されています。ブラウザはタイトルを操作できる部品にするため、キーボードやスクリーンリーダーでも開閉できます。

PDFやWordに書き出すと折りたたみはどうなりますか？

紙は折りたためないため、Markdown PDF 変換とMarkdown Word 変換では、タイトルを見出しにして内容を開いた状態で印刷します。

タイトルの矢印や見た目を変えられますか？

CSSが使える環境でだけ変えられます。GitHubや多くのホスティングサイトではブラウザ標準の三角形のままです。