<meta name="description" content="実践的な例とヒントを含む包括的なガイド。無料ツール付き。"> <link rel="canonical" href="https://txt-tool.com/ja/blog/markdown-cheat-sheet.html"> <meta property="og:title" content="Markdown Cheat Sheet: Complete Reference Guide"> <meta property="og:description" content="Markdown Cheat Sheet: Complete Reference Guide. Free guide with examples."> <meta property="og:url" content="https://txt-tool.com/ja/blog/markdown-cheat-sheet.html"> <meta property="og:type" content="article"> <meta name="twitter:card" content="summary_large_image"> <link rel="stylesheet" href="/css/style.css?v=20260327c"> <script src="/js/theme.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6478776854131333" crossorigin="anonymous"></script> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <script type="application/ld+json">{"@context": "https://schema.org", "@type": "BlogPosting", "headline": "Markdown Cheat Sheet", "datePublished": "2026-03-16", "dateModified":"2026-03-31", "author": {"@type": "Organization", "name": "TxtTool"}, "publisher": {"@type": "Organization", "name": "TxtTool"}, "description": "Markdown Cheat Sheet: Complete Reference Guide. Comprehensive guide with practical examples and tips. Free tools included.", "mainEntityOfPage": {"@type": "WebPage", "@id": "https://txt-tool.com/blog/markdown-cheat-sheet.html"}}</script> <script type="application/ld+json">{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://txt-tool.com/"}, {"@type": "ListItem", "position": 2, "name": "Blog", "item": "https://txt-tool.com/blog/"}, {"@type": "ListItem", "position": 3, "name": "Markdown Cheat Sheet", "item": "https://txt-tool.com/blog/markdown-cheat-sheet.html"}]}</script> <link rel="alternate" hreflang="ja" href="https://txt-tool.com/ja/blog/markdown-cheat-sheet.html"> <link rel="alternate" hreflang="en" href="https://txt-tool.com/blog/markdown-cheat-sheet.html"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-CZ7GQC3DKR"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag("js",new Date());gtag("config","G-CZ7GQC3DKR",{"linker":{"domains":["conv-kit.com,go-calc.com,gen-kit.com,run-dev.com,seo-io.com,txt-tool.com,img-kit.com,the-pdf.com,dl-kit.com,nettool1.com"]}});</script></head> <body> <header class="site-header"> <div class="container header-inner"> <a href="/" class="logo"> <svg viewBox="0 0 28 28" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="28" height="28" rx="6" fill="#06b6d4"/> <path d="M7 7h14M7 12h10M7 17h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/> </svg> Txt<span class="logo-accent">Tool</span> </a> <button class="mobile-menu-btn" aria-label="Toggle menu" onclick="document.querySelector('.nav-links').classList.toggle('open')">☰</button> <nav class="nav-links" aria-label="Main navigation"> <a href="/" class="active">Home</a> <a href="/alltools/">Tools</a> <a href="/blog/">Blog</a> <a href="/about.html">About</a> </nav> <div class="header-actions"> <div class="lang-dropdown"> <button class="lang-btn" onclick="this.nextElementSibling.classList.toggle('show')" aria-label="Language"> <span>🇺🇸</span> EN <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> </button> <div class="lang-menu" id="langMenu"> <a href="/">🇺🇸 English</a> <a href="/es/">🇪🇸 Español</a> <a href="/fr/">🇫🇷 Français</a> <a href="/de/">🇩🇪 Deutsch</a> <a href="/ja/">🇯🇵 日本語</a> <a href="/pt/">🇧🇷 Português</a> <a href="/zh/">🇨🇳 中文</a> <a href="/ko/">🇰🇷 한국어</a> </div> </div> <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> </button> </div> </div> </header> <nav class="breadcrumb" aria-label="Breadcrumb"><div class="container"><a href="/">TxtTool</a><span class="sep">/</span><a href="/blog/">Blog</a><span class="sep">/</span><span>Markdown Cheat Sheet: Complete Reference Guide</span></div></nav> <main id="main-content"> <article class="container" style="max-width:800px;margin:2rem auto;padding:0 1rem"><h1>Markdownチートシート:完全リファレンスガイド</h1> <p class="text-muted" style="margin-bottom:1.5rem"><time datetime="2026-03-31">2026年3月31日</time> · 12分で読めます</p> <p>Markdownは、Web上のテキストフォーマットの普遍的な言語となっています。GitHubでドキュメントを書いたり、Redditに投稿したり、Discordでチャットしたり、Notionでノートを整理したり、その他無数のプラットフォームでコンテンツを作成したりする際、Markdownはどこにでもあります。このシンプルでありながら強力な構文を学ぶことで、使用するすべてのデジタルワークスペースでより生産的になれます。</p> <p>この包括的なガイドは、基本的なフォーマットから高度なテクニックまで、実用的な例と実際のユースケースを含めてすべてをカバーしています。Markdownに関するすべての参照先として、このページをブックマークしてください。</p> <details open style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"> <summary style="cursor:pointer;font-weight:600;margin-bottom:0.75rem">📑 目次</summary> <ul style="margin:0;padding-left:1.5rem"> <li><a href="#what-is-markdown">Markdownとは何か、なぜ使うのか?</a></li> <li><a href="#basic-formatting">基本的なテキストフォーマット</a></li> <li><a href="#headings">見出しと文書構造</a></li> <li><a href="#lists">リスト:順序付き、順序なし、ネスト</a></li> <li><a href="#links-images">リンクと画像</a></li> <li><a href="#code-blocks">コードブロックとシンタックスハイライト</a></li> <li><a href="#tables">テーブルの作成</a></li> <li><a href="#blockquotes">引用と出典</a></li> <li><a href="#advanced-features">高度なMarkdown機能</a></li> <li><a href="#flavors">Markdownフレーバーと拡張機能</a></li> <li><a href="#best-practices">ベストプラクティスとよくある間違い</a></li> <li><a href="#faq">よくある質問</a></li> </ul> </details> <h2 id="what-is-markdown">Markdownとは何か、なぜ使うのか?</h2> <p>Markdownは、2004年にJohn Gruberによって作成された軽量マークアップ言語です。その哲学はシンプルです:プレーンテキストはそのまま読めるべきですが、HTMLやその他の形式にも変換可能であるべきです。ボタンやメニューの背後にフォーマットを隠すリッチテキストエディタとは異なり、Markdownはすべてを可視化し、ポータブルに保ちます。</p> <p>Markdownの美しさはそのシンプルさにあります。任意のテキストエディタで書くことができ、Gitでバージョン管理し、HTML、PDF、または数十の他の形式に変換できます。技術文書、READMEファイル、ブログ投稿、共同執筆のデファクトスタンダードとなっています。</p> <p><strong>Markdownが使用される場所:</strong></p> <ul> <li>GitHub、GitLab、BitbucketでのREADMEファイルとドキュメント</li> <li>Reddit、Discord、Slackでのフォーマットされたメッセージ</li> <li>Notion、Obsidian、Roam Researchでのノート作成</li> <li>Jekyll、Hugo、Gatsbyなどの静的サイトジェネレーター</li> <li>コンテンツ管理システムとブログプラットフォーム</li> <li>技術文書作成ツールとドキュメントプラットフォーム</li> </ul> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>プロのヒント:</strong> 無料の<a href="/tools/markdown-editor/">Markdownエディタ</a>を使用して、リアルタイムのライブプレビューで構文を練習しましょう。実践で学ぶ最速の方法です。</p></div> <h2 id="basic-formatting">基本的なテキストフォーマット</h2> <p>Markdownの基本的なフォーマット構文は直感的で覚えやすいです。ほとんどのフォーマットは、スタイルを適用したいテキストを囲む特殊文字を使用します。</p> <h3>太字テキスト</h3> <p>二重アスタリスクまたは二重アンダースコアで単語を囲んで太字テキストを作成します:</p> <pre><code>**このテキストは太字です** __これも太字です__</code></pre> <p>両方とも次のように表示されます: <strong>このテキストは太字です</strong></p> <h3>斜体テキスト</h3> <p>単一のアスタリスクまたは単一のアンダースコアを斜体テキストに使用します:</p> <pre><code>*このテキストは斜体です* _これも斜体です_</code></pre> <p>両方とも次のように表示されます: <em>このテキストは斜体です</em></p> <h3>太字と斜体の組み合わせ</h3> <p>三重アスタリスクを使用するか、アスタリスクとアンダースコアを混在させて両方を組み合わせます:</p> <pre><code>***太字と斜体のテキスト*** **_これも太字と斜体_**</code></pre> <p>結果: <strong><em>太字と斜体のテキスト</em></strong></p> <h3>取り消し線</h3> <p>ほとんどのMarkdownフレーバーは二重チルダで取り消し線をサポートしています:</p> <pre><code>~~このテキストは取り消されています~~</code></pre> <p>結果: <del>このテキストは取り消されています</del></p> <h3>インラインコード</h3> <p>単一のバッククォートでテキストを囲んでインラインコードとしてフォーマットします:</p> <pre><code>`console.log()`関数を使用してデバッグします。</code></pre> <p>結果: <code>console.log()</code>関数を使用してデバッグします。</p> <table style="width:100%;border-collapse:collapse;margin:1.5rem 0"> <thead> <tr style="background:var(--bg-secondary)"> <th style="border:1px solid var(--border);padding:0.75rem;text-align:left">構文</th> <th style="border:1px solid var(--border);padding:0.75rem;text-align:left">出力</th> <th style="border:1px solid var(--border);padding:0.75rem;text-align:left">使用例</th> </tr> </thead> <tbody> <tr> <td style="border:1px solid var(--border);padding:0.75rem"><code>**text**</code></td> <td style="border:1px solid var(--border);padding:0.75rem"><strong>text</strong></td> <td style="border:1px solid var(--border);padding:0.75rem">強調、重要な用語</td> </tr> <tr> <td style="border:1px solid var(--border);padding:0.75rem"><code>*text*</code></td> <td style="border:1px solid var(--border);padding:0.75rem"><em>text</em></td> <td style="border:1px solid var(--border);padding:0.75rem">微妙な強調、書籍タイトル</td> </tr> <tr> <td style="border:1px solid var(--border);padding:0.75rem"><code>~~text~~</code></td> <td style="border:1px solid var(--border);padding:0.75rem"><del>text</del></td> <td style="border:1px solid var(--border);padding:0.75rem">削除されたコンテンツ、訂正</td> </tr> <tr> <td style="border:1px solid var(--border);padding:0.75rem"><code>`text`</code></td> <td style="border:1px solid var(--border);padding:0.75rem"><code>text</code></td> <td style="border:1px solid var(--border);padding:0.75rem">コード、コマンド、ファイル名</td> </tr> </tbody> </table> <h2 id="headings">見出しと文書構造</h2> <p>見出しは文書の階層を作成し、可読性を向上させます。Markdownは6レベルの見出しをサポートしており、HTMLの<code><h1></code>から<code><h6></code>タグに対応しています。</p> <pre><code># 見出し1(最大) ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6(最小)</code></pre> <p>ハッシュ記号の数が見出しレベルを決定します。ハッシュ記号と見出しテキストの間には常にスペースを含めてください。</p> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>ベストプラクティス:</strong> 見出しレベルを階層的に使用してください。H1からH4にスキップしないでください。これにより、スクリーンリーダーのアクセシビリティが向上し、検索エンジンがコンテンツ構造を理解しやすくなります。</p></div> <h3>代替見出し構文</h3> <p>H1とH2については、アンダーラインスタイルの構文も使用できます:</p> <pre><code>見出し1 ========= 見出し2 ---------</code></pre> <p>ただし、ハッシュ記号の構文がより一般的で、6つのレベルすべてをサポートしています。</p> <h3>見出しのベストプラクティス</h3> <ul> <li>文書ごとにH1を1つだけ使用する(通常はタイトル)</li> <li>見出しを簡潔で説明的に保つ</li> <li>文の大文字小文字またはタイトルケースを一貫して使用する</li> <li>見出しを句読点で終わらせない</li> <li>可読性のために見出しの前後に空白行を追加する</li> </ul> <h2 id="lists">リスト:順序付き、順序なし、ネスト</h2> <p>リストは情報を整理するための基本です。Markdownは順序なし(箇条書き)リスト、順序付き(番号付き)リスト、およびその両方のネストされた組み合わせをサポートしています。</p> <h3>順序なしリスト</h3> <p>アスタリスク、ハイフン、またはプラス記号を使用して箇条書きリストを作成します。3つすべてが同じ出力を生成します:</p> <pre><code>* 最初の項目 * 2番目の項目 * 3番目の項目 - 最初の項目 - 2番目の項目 - 3番目の項目 + 最初の項目 + 2番目の項目 + 3番目の項目</code></pre> <p>1つのスタイルを選択し、文書全体で一貫して使用してください。</p> <h3>順序付きリスト</h3> <p>ピリオド付きでリスト項目に番号を付けます。実際の番号は重要ではありません—Markdownが自動的に番号を振り直します:</p> <pre><code>1. 最初の項目 2. 2番目の項目 3. 3番目の項目 1. 最初の項目 1. 2番目の項目 1. 3番目の項目</code></pre> <p>両方とも同じ番号付きリストを生成します。すべて1を使用すると、番号を振り直すことなく項目を並べ替えやすくなります。</p> <h3>ネストされたリスト</h3> <p>ネストされた項目を2または4スペースでインデントします(一貫性を保つ):</p> <pre><code>1. 最初の項目 - ネストされた箇条書き - 別のネストされた箇条書き 2. 2番目の項目 1. ネストされた番号 2. 別のネストされた番号</code></pre> <h3>タスクリスト</h3> <p>多くのMarkdownフレーバーはチェックボックス付きのタスクリストをサポートしています:</p> <pre><code>- [x] 完了したタスク - [ ] 未完了のタスク - [ ] 別の未完了のタスク</code></pre> <p>これは特にGitHubのissueやプロジェクト管理ツールで便利です。</p> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>クイックヒント:</strong> 複数段落のリスト項目を書く場合、後続の段落を箇条書き記号ではなく、テキストの最初の行に揃えてインデントします。</p></div> <h2 id="links-images">リンクと画像</h2> <p>Markdownを使用すると、HTMLタグでテキストを乱雑にすることなく、ハイパーリンクや画像を簡単に追加できます。</p> <h3>基本的なリンク</h3> <p>リンクの構文は簡単です:リンクテキストには角括弧、URLには丸括弧を使用します:</p> <pre><code>[Markdownエディタにアクセス](/tools/markdown-editor/)</code></pre> <p>結果: <a href="/tools/markdown-editor/">Markdownエディタにアクセス</a></p> <h3>タイトル付きリンク</h3> <p>URLの後に引用符で囲んでタイトル属性(ホバー時に表示)を追加します:</p> <pre><code>[GitHub](https://github.com "GitHubにアクセス")</code></pre> <h3>参照スタイルのリンク</h3> <p>繰り返しリンクが多い文書の場合、参照スタイルの構文を使用してテキストをきれいに保ちます:</p> <pre><code>詳細については[Google][1]と[GitHub][2]をチェックしてください。 [1]: https://google.com "Google" [2]: https://github.com "GitHub"</code></pre> <p>参照定義は文書内のどこにでも配置でき、出力には表示されません。</p> <h3>自動リンク</h3> <p>URLまたはメールアドレスを山括弧で囲んでクリック可能にします:</p> <pre><code><https://example.com> <email@example.com></code></pre> <p>多くのMarkdownプロセッサは、山括弧なしの裸のURLも自動的にリンクします。</p> <h3>画像</h3> <p>画像の構文はリンクと同じですが、感嘆符のプレフィックスが付きます:</p> <pre><code>![画像を説明する代替テキスト](image-url.png) ![代替テキスト](image-url.png "オプションのタイトル")</code></pre> <p>代替テキストはアクセシビリティとSEOにとって重要です。画像が何を示しているかを説明する説明的な代替テキストを常に提供してください。</p> <h3>画像のベストプラクティス</h3> <ul> <li>アクセシビリティのために説明的な代替テキストを書く</li> <li>同じリポジトリ内の画像には相対パスを使用する</li> <li>高速読み込みのために画像ファイルサイズを最適化する</li> <li>繰り返し使用する画像には参照スタイルの構文の使用を検討する</li> <li>ターゲットプラットフォームで画像が正しく表示されることをテストする</li> </ul> <h2 id="code-blocks">コードブロックとシンタックスハイライト</h2> <p>コードブロックは技術文書に不可欠です。Markdownは、インラインスニペットからシンタックスハイライト付きの複数行ブロックまで、コードをフォーマットする複数の方法を提供します。</p> <h3>インラインコード</h3> <p>前述のように、インラインコードを単一のバッククォートで囲みます:</p> <pre><code>`git commit`コマンドを使用して変更を保存します。</code></pre> <h3>フェンスコードブロック</h3> <p>複数行のコードの場合、コードの前後に三重バッククォート(または三重チルダ)を使用します:</p> <pre><code>``` function greet(name) { return `Hello, ${name}!`; } ```</code></pre> <h3>シンタックスハイライト</h3> <p>シンタックスハイライトのために、開始バッククォートの後にプログラミング言語を指定します:</p> <pre><code>```javascript function greet(name) { return `Hello, ${name}!`; } ``` ```python def greet(name): return f"Hello, {name}!" ``` ```css .button { background-color: #06b6d4; border-radius: 8px; } ```</code></pre> <p>ほとんどのMarkdownプロセッサは、JavaScript、Python、Java、C++、Ruby、Go、Rust、SQL、HTML、CSSなど、数十の言語をサポートしています。</p> <h3>インデントされたコードブロック</h3> <p>古い構文では、4スペースのインデントを使用してコードブロックを作成します:</p> <pre><code> function example() { return true; }</code></pre> <p>ただし、フェンスコードブロックは、シンタックスハイライトをサポートし、プレーンテキストで読みやすいため、推奨されます。</p> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>プロのヒント:</strong> Markdown文書に貼り付ける前に、<a href="/tools/html-beautifier/">HTML Beautifier</a>を使用してコードをフォーマットしてください。きれいで整形式のコードは読みやすく、保守しやすいです。</p></div> <h2 id="tables">テーブルの作成</h2> <p>テーブルはデータを行と列に整理します。MarkdownテーブルはHTMLテーブルほど柔軟ではありませんが、シンプルなデータ表示には最適です。</p> <h3>基本的なテーブル構文</h3> <p>パイプとハイフンを使用してテーブルを作成します:</p> <pre><code>| ヘッダー1 | ヘッダー2 | ヘッダー3 | |----------|----------|----------| | セル1 | セル2 | セル3 | | セル4 | セル5 | セル6 |</code></pre> <p>パイプは完全に揃える必要はありません—Markdownプロセッサが正しくフォーマットします。ただし、揃えられたパイプはプレーンテキストでテーブルを読みやすくします。</p> <h3>列の配置</h3> <p>区切り行でコロンを使用してテキストの配置を制御します:</p> <pre><code>| 左揃え | 中央揃え | 右揃え | |:---------|:----------:|----------:| | テキスト | テキスト | テキスト | | 追加文字 | 追加文字 | 追加文字 |</code></pre> <ul> <li><code>:---</code> 左揃え(デフォルト)</li> <li><code>:---:</code> 中央揃え</li> <li><code>---:</code> 右揃え</li> </ul> <h3>実用的なテーブルの例</h3> <table style="width:100%;border-collapse:collapse;margin:1.5rem 0"> <thead> <tr style="background:var(--bg-secondary)"> <th style="border:1px solid var(--border);padding:0.75rem;text-align:left">Markdownフレーバー</th> <th style="border:1px solid var(--border);padding:0.75rem;text-align:left">テーブル</th> <th style="border:1px solid var(--border);padding:0.75rem;text-align:left">タスクリスト</th> <th style="border:1px solid var(--border);padding:0.75rem;text-align:left">脚注</th> </tr> </thead> <tbody> <tr> <td style="border:1px solid var(--border);padding:0.75rem">CommonMark</td> <td style="border:1px solid var(--border);padding:0.75rem">❌ なし</td> <td style="border:1px solid var(--border);padding:0.75rem">❌ なし</td> <td style="border:1px solid var(--border);padding:0.75rem"></article> </main> <footer class="site-footer"> <div class="container"> <div class="footer-grid"> <div class="footer-col"><h4>Format</h4><a href="/tools/sort-lines/">Sort Lines</a><a href="/tools/remove-duplicates/">Remove Duplicates</a></div> <div class="footer-col"><h4>Encode</h4><a href="/tools/unicode-converter/">Unicode Converter</a></div> <div class="footer-col"><h4>Count</h4><a href="/tools/word-counter/">Word Counter</a><a href="/tools/character-counter/">Character Counter</a><a href="/tools/line-counter/">Line Counter</a><a href="/tools/text-statistics/">Text Statistics</a></div> <div class="footer-col"><h4>Convert</h4><a href="/tools/markdown-to-html/">Markdown To Html</a><a href="/tools/html-to-text/">Html To Text</a><a href="/tools/csv-to-json/">Csv To Json</a><a href="/tools/json-to-csv/">Json To Csv</a></div> <div class="footer-col"><h4>Company</h4><a href="/about.html">About</a><a href="/blog/">Blog</a><a href="/contact.html">Contact</a><a href="/sitemap.xml">Sitemap</a></div> </div> <div class="footer-bottom"> <span>© 2026 TxtTool. All processing happens in your browser.</span> <div class="footer-legal"><a href="/privacy.html">Privacy</a><a href="/terms.html">Terms</a></div> </div> </div> <div class="matrix-links" style="text-align:center;padding:10px 0;border-top:1px solid rgba(255,255,255,0.05)"><span style="color:#666;font-size:0.75em">More Tools: </span><a href="https://run-dev.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">run-dev</a><a href="https://img-kit.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">img-kit</a><a href="https://the-pdf.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">the-pdf</a><a href="https://nettool1.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">nettool1</a></div></footer> </body> </html>