マークダウン入門ナビ 
Markdown（マークダウン）で長文のドキュメントやREADME、FAQ（Q&A）、エラーログ、コードスニペットなどを書いていると、「情報量が多すぎて画面が縦に長くなり、読みづらくなってしまう」と悩むことはありませんか？
そんなときに非常に便利なのが、クリックで開閉できる「折りたたみ（トグル表示・アコーディオン）」です。補足情報や長いログを折りたたんでおくことで、文書全体の構造がスッキリして読者が知りたい情報に素早くアクセスできるようになります。
実は、純粋なMarkdown標準文法には折りたたみ専用の記号はありませんが、HTML5の <details> タグと <summary> タグを直接書き込むことで、誰でも簡単に折りたたみを作成可能です。
この記事では、コピペですぐ使える折りたたみコードスニペットをはじめ、初期状態で開いておく方法（open 属性）、「折りたたみ内の箇条書きやコードが崩れる」という最大の落とし穴（空行ルール）、GitHub・Notion・Qiita・Zenn・Backlogなどの主要ツール別対応状況まで、徹底的に分かりやすく解説します。
📌 本記事のポイント・要点まとめ
- 基本記法：
<details>（全体）と<summary>（見出し）を組み合わせるだけでJavaScript不要で動作 - 【最重要】空行ルール：
<summary>の直後と</details>の直前に必ず空行を1行挟むことで、中のMarkdown（リスト・コード・表など）が正常レンダリングされる - 初期状態で展開：
<details open>と書くだけで、最初から開いた状態（アコーディオン展開状態）に設定可能 - 高い互換性： GitHub、Qiita、Zenn、VS Code、Obsidianなど主要なMarkdown環境で幅広くサポート
【コピペで即解決】Markdown折りたたみの基本コードスニペット
まずは「今すぐ使いたい」という方向けに、コピペしてそのまま使える基本コードスニペットを用意しました。以下のコードをコピーして、Markdownファイルやエディタに貼り付けてみてください。
<details>
<summary>ここをクリックして詳細を開く</summary>
ここに折りたたみたい本文や説明文を記述します。
Markdownの太字やリンクもそのまま使えます。
</details>
▼ 実際のブラウザ表示（クリックして開閉を試せます）
ここをクリックして詳細を開く
ここに折りたたまれていた本文が表示されます。
クリックするたびに開閉（トグル動作）が切り替わります。
たったこれだけで、クリックすると開閉するトグル（アコーディオン）UIが完成します。特別なプラグインやJavaScriptを導入する必要は一切ありません。
Markdownで折りたたみ（トグル表示）を作る基本構文と仕組み
なぜMarkdownで <details> や <summary> というHTMLタグが使えるのか、その仕組みと各タグの役割を整理しておきましょう。
<details> タグと <summary> タグの役割
Markdown仕様（CommonMarkやGitHub Flavored Markdown = GFM）では、「Markdown文書の中に直接HTMLタグを記述できる（インラインHTML）」という仕様が標準で備わっています。
そのため、HTML5で標準化されている折りたたみ用のタグをそのまま記述することで、MarkdownパーサーがHTMLとして解釈・レンダリングしてくれるのです。
| タグ名 | 役割・説明 |
|---|---|
<details> |
折りたたみブロック全体を囲むコンテナタグ。開閉の状態を管理します。 |
<summary> |
常に画面に表示される「見出し・タイトル」部分。ユーザーがクリックするターゲットになります。 |
| 折りたたみ本文 | <summary> の下に記述した文章やMarkdown記法。開いたときだけ表示されます。 |
ブラウザ標準の機能として、<summary> の先頭には自動的に三角アイコン（▶ / ▼）が付与され、クリックでスムーズに開閉します。
タイトル（<summary>）を太字や絵文字で装飾する方法
<summary> タグの中身はプレーンテキストだけでなく、太字タグ（<strong> / <b>）や絵文字、アイコンを組み合わせて見栄えを良くすることができます。
<details>
<summary>💡 <b>ヒント：</b>ここをクリックするとアドバイスが表示されます</summary>
作業を効率化するためのワンポイントアドバイスです。
</details>
▼ 装飾を施した表示例
💡 ヒント：ここをクリックするとアドバイスが表示されます
作業を効率化するためのワンポイントアドバイスです。
絵文字を使うことで、「💡 ヒント」「⚠️ 注意事項」「📝 ソースコード」「❓ Q&A」など、折りたたまれている内容の性質が一目でわかるようになり、読者体験（UX）が大幅に向上します。
【超重要】折りたたみの中にMarkdownを入れる「空行ルール」
Markdownで折りたたみを作成するとき、初心者が最もつまずきやすいのが「折りたたみの中に箇条書きやコードブロック、太字、表を書いたのに、Markdownとして反映されず記号のまま表示されてしまう」というトラブルです。
⚠️ 最大の注意点：HTMLタグとMarkdown本文の間には「空行」が必須！
Markdownパーサー（変換エンジン）は、HTMLタグの直後に文字が続いていると「タグの中身全体を純粋なHTML文字列」として処理してしまいます。中身をMarkdown記法として認識させるには、<summary> の後と </details> の前に必ず「1行以上の空行（改行）」を挟む必要があります。
失敗例（NG）と 成功例（OK）の比較
具体的にどのような違いが出るのか、失敗例と成功例のコードを並べて比較してみましょう。
❌ 失敗例（空行がない場合）
<details>
<summary>箇条書きリスト</summary>
- リスト項目1
- リスト項目2
- **太字テキスト**
</details>※ - リスト項目 や **太字** がMarkdown変換されず、記号のまま表示されてしまいます。
⭕ 成功例（前後に空行を入れた場合）
<details>
<summary>箇条書きリスト</summary>
- リスト項目1
- リスト項目2
- **太字テキスト**
</details>※ 空行があるため、リストや太字が綺麗にレンダリングされます。
「折りたたみがうまく機能しない」「中身が崩れる」と感じたら、まず空行が正しく挿入されているかを確認してください。
折りたたみの中にコードブロック（“`）を入れる書き方
プログラミングのソースコードやターミナルコマンドの実行結果、長いJSONデータを折りたたむ書き方です。前後に空行を空けた上で、通常の Markdownコードブロック記法（バッククォート3つ ```）を記述します。
<details>
<summary>Pythonコードの例を見る</summary>
```python
def greet(name: str) -> str:
"""挨拶メッセージを返す関数"""
return f"Hello, {name}!"
print(greet("Markdown"))
```
</details>
▼ コードブロックの折りたたみ表示例
Pythonコードの例を見る
def greet(name: str) -> str:
"""挨拶メッセージを返す関数"""
return f"Hello, {name}!"
print(greet("Markdown"))折りたたみの中に表（テーブル）やリストを入れる書き方
長い比較表や手順リストを折りたたむ場合も、同様に前後に空行を確保して Markdown表記法 や 箇条書きリスト を記述します。
<details>
<summary>📊 料金プランの比較表を表示</summary>
| プラン名 | 月額料金 | ストレージ容量 | サポート |
| :--- | :---: | :---: | :--- |
| **フリー** | 0円 | 5GB | コミュニティ |
| **スタンダード** | 980円 | 50GB | メール対応 |
| **プレミアム** | 2,480円 | 無制限 | 24時間優先対応 |
</details>
▼ テーブルの折りたたみ表示例
📊 料金プランの比較表を表示
| プラン名 | 月額料金 | ストレージ容量 | サポート |
|---|---|---|---|
| フリー | 0円 | 5GB | コミュニティ |
| スタンダード | 980円 | 50GB | メール対応 |
| プレミアム | 2,480円 | 無制限 | 24時間優先対応 |
折りたたみを多重ネスト（入れ子・階層構造）にする方法
<details> タグの中にさらに <details> タグを入れることで、階層構造（アコーディオンの入れ子）を作成することも可能です。設定項目が多いマニュアルやカテゴリ別のQ&Aなどに役立ちます。
<details>
<summary>📁 第1章：基本設定（クリックして展開）</summary>
ここに第1章の概要を記述します。
<details>
<summary>🔹 1-1. アカウント登録手順</summary>
1. 公式サイトへアクセス
2. メールアドレスを入力
3. 認証リンクをクリック
</details>
<details>
<summary>🔹 1-2. 初期パスワード変更</summary>
安全なパスワード（英数字・記号8文字以上）に再設定します。
</details>
</details>
▼ 多重ネスト（入れ子）の表示例
📁 第1章：基本設定（クリックして展開）
ここに第1章の概要を記述します。
🔹 1-1. アカウント登録手順
- 公式サイトへアクセス
- メールアドレスを入力
- 認証リンクをクリック
🔹 1-2. 初期パスワード変更
安全なパスワード（英数字・記号8文字以上）に再設定します。
初期状態（デフォルト）で折りたたみを開いておく方法｜open属性
通常、<details> タグは「最初は閉じた状態」でレンダリングされますが、「最初は開いた状態で見せたいが、不要なユーザーは閉じられるようにしたい」というケースもあります。
そのようなときは、<details> に open 属性 を追加するだけで実現できます。
<details open>
<summary>⚠️ 重要なお知らせ（初期状態で展開されています）</summary>
このお知らせはページを開いた時点で最初から表示されています。
クリックすると折りたたんで隠すことができます。
</details>
▼ open属性を付与した表示例（最初から開いています）
⚠️ 重要なお知らせ（初期状態で展開されています）
このお知らせはページを開いた時点で最初から表示されています。
見出し部分をクリックすると、上に向かって折りたたまれます。
open属性のおすすめ活用シーン
- 重要度の高い注意事項・免責事項： 必ず一度は目を通してほしいが、長文なので読了後に閉じられるようにしたい場合
- Q&Aの第1問目： アコーディオン機能の使い方を読者に直感的に伝えるため、最初の1項目だけを開いておく手法
- READMEのメイン手順： 主要手順はデフォルト表示にし、発展的なオプション設定だけを閉じておく構成
主要ツール・プラットフォーム別の折りたたみ対応状況一覧
Markdownを使用する環境（Webサービス・エディタ・ドキュメントツール）によって、<details> タグのサポート状況や独自の折りたたみ記法が異なります。主要なプラットフォームの対応表をまとめました。
| プラットフォーム | <details> 対応 |
独自トグル記法 | 特徴・注意点 |
|---|---|---|---|
| GitHub (Issue / PR / README) |
◯ 完全対応 | なし（HTML推奨） | GFM標準対応。ログや長文ディスカッションの整理に公式推奨されています。 |
| Qiita | ◯ 完全対応 | なし（HTML対応） | 記事・コメント欄ともに <details> で折りたたみが動作します。 |
| Zenn | ◯ 完全対応 | あり（:::details） | HTMLタグに加えて、独自のアコーディオン記法 :::details タイトル も使えます。 |
| Notion | △ インポート変換 | あり（/toggle） | Notion上では「トグルリスト（> ）」を使用。Markdownインポート時にトグルブロックへ自動変換されます。 |
| Backlog | × 非対応 / 制限あり | なし | BacklogのMarkdown記法ではセキュリティ上HTMLタグが無効化される設定があります。 |
| VS Code | ◯ プレビュー対応 | 拡張機能による | 標準プレビューで <details> の開閉が動作します。 |
| Obsidian | ◯ 完全対応 | Callout折りたたみ | <details> だけでなく、独自コールアウトの折りたたみ（> [!note]-）も強力です。 |
| WordPress | ◯ 完全対応 | アコーディオンブロック | カスタムHTMLブロックまたはコードブロック内で <details> を安全に記述可能です。 |
| Slack / Discord | × 非対応 | なし | チャットツールのMarkdownはHTMLをサポートしないため、タグがそのままテキスト表示されます。 |
1. GitHub（Issue, Pull Request, README, Discussions）
GitHubは <details> タグの利用が最も普及しているプラットフォームです。以下のような場面で頻繁に活用されます。
- IssueやPull Request： エラーログの全文、スタックトレース、CI/CDのテスト結果出力の格納
- README.md： 過去の変更履歴（Changelog）や、詳細なAPIパラメータ表の折りたたみ
- スクリーンショットの整理： UIの変更前後の画像を折りたたんでPRの見通しを良くする
2. Zenn（独自アコーディオン記法との使い分け）
技術情報共有プラットフォーム「Zenn」では、HTMLの <details> に加えて、より直感的に書ける独自のコンテナ記法（アコーディオン記法）が用意されています。
:::details アコーディオンのタイトル
ここに折りたたみたい本文を記述します。
通常のMarkdown記法がそのまま利用可能です。
:::
Zennのみで公開する記事であれば :::details 記法が手軽でおすすめですが、GitHubや他のプラットフォームと共通のMarkdownファイルとして管理したい場合は、標準の <details> タグを使用するほうがポータビリティ（汎用性）が高くなります。
3. Notion（トグルリストとの連携）
Notion では、スラッシュコマンド /toggle や > 半角スペース を入力することで「トグルリスト（Toggle List）」ブロックを即座に作成できます。
MarkdownファイルをNotionにインポートする際、<details> タグで書かれたブロックは自動的にNotionのネイティブなトグルリストへ変換されるため、ドキュメントの移行時も安心して利用できます。
実務で役立つ！Markdown折りたたみの活用テクニック＆実例集
折りたたみタグは、単に文章を隠すだけでなく、文書の「可読性」と「情報設計」を大きく向上させる強力なテクニックです。実際のドキュメント作成で役立つ3つの具体例を紹介します。
活用例1：FAQ（よくある質問・Q&A）アコーディオン
WebサイトやサービスのREADMEで質問と回答を一覧化する場合、すべて開いておくとスクロール量が多くなります。質問だけを見出しにしておくことで、ユーザーは知りたい項目だけを効率よく探せます。
<details>
<summary>❓ Q. 商用利用は可能ですか？</summary>
はい、個人・法人を問わず商用プロジェクトで無料でご利用いただけます。クレジット表記も不要です。
</details>
<details>
<summary>❓ Q. 動作環境・対応ブラウザを教えてください。</summary>
Google Chrome、Safari、Microsoft Edge、Firefoxの各最新版で動作確認済みです。
</details>
活用例2：長大なエラーログやターミナル出力の格納
GitHub Issueや技術ブログでエラーログをそのまま貼ると、画面の大半をログが埋め尽くしてしまいます。重要な要約だけを本文に書き、詳細ログは折りたたみに格納するのがエンジニアのベストプラクティスです。
サーバー起動時に `500 Internal Server Error` が発生しました。
<details>
<summary>📋 スタックトレース全文（クリックで展開）</summary>
```bash
[2026-08-19 18:30:12] ERROR: Database connection failed.
at Database.connect (/app/src/db.ts:42:15)
at Server.start (/app/src/server.ts:18:9)
at Object.<anonymous> (/app/src/index.ts:5:1)
```
</details>
活用例3：クイズ・演習問題の「答えと解説」
学習用コンテンツや研修資料で、問題文を読んだあとですぐに答えが見えてしまわないよう、解答と解説を折りたたんでおく構成です。
### 問題：Markdownで見出しレベル2を作成する記号は何でしょうか？
<details>
<summary>💡 答えを見る</summary>
**正解： `## ` （シャープ2つと半角スペース）**
解説：見出しレベルに応じて `#` の個数を増やします（H1なら `#`、H2なら `##`、H3なら `###`）。
</details>
Markdownの折りたたみに関するよくある質問（FAQ）
Q1. Markdown専用の折りたたみ記号（#や-のような記法）はなぜ無いの？
A. Markdownはもともと「プレーンテキストとしても読みやすい軽量マークアップ」として設計されたため、開閉インタラクションを伴う高度なUI要素は標準仕様に含まれていません。しかし、Markdownは「HTMLタグをそのまま埋め込める」という柔軟な仕様を持っているため、HTML5の標準タグである <details> を活用するのが世界的なデファクトスタンダードとなっています。
Q2. 折りたたみ内のリストやコードにインデント（字下げ）は必要ですか？
A. 特別なインデントは必須ではありません。タグの前後を「空行」で区切ってさえいれば、行頭から通常通り記述して正常にMarkdown認識されます。ただし、コードの可読性を高めるためにインデントする場合は、半角スペース2つまたは4つで揃えるのが一般的です。詳しくは「Markdownインデントの基本」をご覧ください。
Q3. 折りたたみの三角矢印（▶）を消したり、別のアイコンに変えたりできますか？
A. CSSを適用できる環境（自作WebサイトやWordPressなど）であれば、summary::-webkit-details-marker { display: none; } や summary { list-style: none; } を指定することで標準の矢印を非表示にしたり、好みのアイコンに差し替えたりできます。ただし、GitHubなどのWebサービス上ではCSSの直接注入は制限されています。
Q4. MarkdownをPDFやWord形式に変換したとき、折りたたみはどう出力されますか？
A. PandocやVS CodeのPDF出力拡張機能で印刷用ドキュメントに変換する場合、多くのコンバーターでは「中身がすべて展開された状態」で印刷・PDF化されます（紙やPDFにはクリック機能がないため）。印刷時のレイアウトを確認したい場合は、Markdown PDF変換ガイド もあわせてご参照ください。
まとめ：Markdown折りたたみ（detailsタグ）を使いこなして見やすい文書を作ろう
今回は、Markdownでクリック開閉できる折りたたみ（アコーディオン・トグル表示）を作成する方法と注意点を解説しました。最後に重要なポイントをおさらいしておきましょう。
✅ Markdown折りたたみの重要チェックリスト
- 基本構文：
<details>と<summary>で囲む（JavaScript不要） - 空行の徹底：
<summary>の直後と</details>の直前には必ず空行を1行空ける - 初期展開：
<details open>でデフォルト開いた状態にする - 装飾テクニック： タイトルに絵文字（💡 ⚠️ 📝）や
<b>タグを入れて視認性アップ - 対応プラットフォーム： GitHub、Qiita、Zenn、VS Codeなどで幅広く利用可能
折りたたみ機能を上手に活用することで、情報量の多い技術ドキュメントやREADME、ブログ記事でも、読者に圧迫感を与えずに必要な情報をスマートに届けることができます。ぜひ本記事のスニペットをコピーして、日々のMarkdown作成に取り入れてみてください！