# 見出し1
## 見出し2
### 見出し3**太字** *斜体* ~~取り消し線~~- リスト項目
1. 番号付きリスト[リンク](URL)
`インラインコード`
```
コードブロック
```> 引用文| ヘッダー | ヘッダー |
|---------|---------|
| セル | セル |- [x] 完了タスク
- [ ] 未完了タスク--- （水平線）注釈[^1]
[^1]: 注釈の内容Markdown（マークダウン）は、2004年にJohn Gruberが作った軽量マークアップ言語です。 要するに、普通のテキストに「#」とか「*」みたいな記号を付けるだけで、見出しや太字、リンクが簡単に作れる仕組み。 HTMLを直接書くより断然楽で、しかも読みやすいんです。
技術文書、ブログ、READMEファイルなど、色々な場面で使われてます。 GitHub、Reddit、Stack Overflowなど、エンジニアがよく使うサイトはほぼ全部Markdownに対応してますね。 一度覚えたら、もうWordとかリッチエディタには戻れない。
1. 技術ドキュメント・README作成
GitHubのREADME.mdって、全部Markdownで書かれてます。 プロジェクトの説明とかインストール手順を書いて、GitHubにプッシュすれば自動でいい感じに表示される。 このツールでプレビュー確認してから公開すれば、「あ、表示崩れてる…」って後から気づくこともなくなります。
2. ブログ記事の執筆と公開
Hugo、Jekyll、Next.jsみたいな静的サイトジェネレーターは、だいたいMarkdownで記事を書きます。 Markdownエディタで下書きして、このツールでHTML変換してプレビュー。公開前の最終チェックに便利です。 WordPressとかはてなブログにHTML貼り付けする時も使えますよ。
3. メールのHTML化・テンプレート作成
ニュースレターとか社内報告書を書く時、Markdownで下書きしてからHTML変換すると見栄えが良くなります。 プレーンテキストだと味気ないけど、HTMLを手書きするのは面倒。 Markdownなら「##見出し」「**太字**」って書くだけで、ちゃんとしたHTMLメールが作れちゃいます。
4. プレゼンテーション資料の作成
Marp、reveal.js、Slidevとかを使うと、Markdownからスライド資料を作れます。 PowerPoint開くの重いし、デザインに凝りだすと時間溶けますよね。Markdownならテキスト書くだけでサクッとスライド完成。 技術勉強会とか、コードを見せたいプレゼンにはピッタリです。
5. Wikiやナレッジベースの構築
Notion、Confluence、Obsidianみたいな社内Wikiシステムは、ほぼ全部Markdownに対応してます。 表組みとかリスト構造が複雑になる時は、このツールでプレビュー確認してから投稿すると安心。 「あれ？ネストが崩れてる…」って後から直すの面倒ですからね。
1. 見出しの階層を適切に使う
見出しは6レベル（#～######）まで使えますが、一般的には3レベル（h1～h3）までで十分です。 h1は文書全体のタイトル、h2は大見出し、h3は中見出しとして使い、階層をスキップせずに順番に使うことが推奨されます。 これによりSEOの観点からも、アクセシビリティの観点からも優れた文書構造になります。
2. リストのネスト（入れ子）を使いこなす
リストをネストする場合は、スペース2つまたは4つでインデントします。ハイフン（-）、アスタリスク（*）、 プラス（+）はどれも同じリスト記号として認識されますが、一貫性のために同じ記号を使い続けることが推奨されます。 番号付きリストと箇条書きリストを混在させることも可能です。
3. コードブロックでシンタックスハイライト
コードブロック（```）の直後に言語名（javascript、python、bashなど）を指定すると、 多くのMarkdownパーサーがシンタックスハイライトを適用してくれます。 このツールでも言語指定を認識し、HTML出力時に適切なクラス名が付与されます。
4. 表組み（テーブル）の記述ルール
Markdownの表組みは、パイプ（|）とハイフン（-）を使って作成します。ヘッダー行と区切り行が必須です。 セルの文字列の長さを揃える必要はなく、コロン（:）を使って左寄せ、中央寄せ、右寄せを指定できます。 例：|:---|:---:|---:|は、左寄せ、中央、右寄せを表します。
5. GFM（GitHub Flavored Markdown）の拡張機能
GFMは標準のMarkdownに、タスクリスト、取り消し線、自動リンク、絵文字などの機能を追加した拡張仕様です。 このツールはGFMに対応しており、- [x]でチェック済みタスク、~~text~~で取り消し線を表現できます。 GitHub以外でも広く採用されている記法なので、覚えておくと便利です。
Q1. MarkdownとHTMLを混在させることはできますか？
はい、Markdownの中にHTMLタグを直接埋め込むことができます。 ただし、HTML要素の中にMarkdown記法を書いても認識されない場合があるため、複雑なレイアウトが必要な場合は、 完全にHTMLで書くか、Markdownの記法だけで表現できるように工夫することをおすすめします。
Q2. 画像のサイズを指定することはできますか？
標準のMarkdown記法（）では画像サイズを指定できませんが、 HTMLの<img>タグを直接使えばサイズ指定が可能です。例：<img src="url" width="300">。 また、一部のMarkdownパーサーは独自の拡張構文（{width=300}など）をサポートしています。
Q3. 変換されたHTMLをそのままWebページとして使えますか？
このツールの「HTMLダウンロード」機能を使えば、完全なHTMLファイル（<html>、<head>、<body>タグを含む）がダウンロードされます。 基本的なCSSスタイルも埋め込まれているため、そのままブラウザで開いて閲覧可能です。 より高度なデザインが必要な場合は、CSSをカスタマイズしてください。
Q4. このツールはどのMarkdown仕様に対応していますか？
このツールは「marked」ライブラリを使用しており、GitHub Flavored Markdown（GFM）に準拠しています。 標準のMarkdown記法に加えて、テーブル、タスクリスト、取り消し線、自動リンクなどの拡張機能が利用できます。 ただし、脚注（Footnotes）など一部の拡張記法は対応していない場合があります。
Q5. ファイルをアップロードせずに、直接ペーストして使えますか？
はい、エディタータブに直接Markdownテキストをペーストして使用できます。 また、「Markdownファイルを開く」ボタンから.mdファイルをアップロードすることも可能です。 どちらの方法でも、リアルタイムでHTMLプレビューが更新されます。
読みやすい文書構造を作る
- ✓ 見出しレベルをスキップせず、h1→h2→h3の順に使う
- ✓ 長い文書は目次（リンク付きリスト）を先頭に置く
- ✓ 1つのパラグラフは3～5文程度に抑える
- ✓ コードブロックには必ず言語名を指定する
- ✓ 画像には必ず代替テキスト（alt）を設定する
技術文書を書く際のポイント
- ✓ インストール手順は番号付きリストで順序を明確にする
- ✓ コマンドやコードは必ずコードブロックで囲む
- ✓ ファイルパスや設定名はインラインコード（`）で強調
- ✓ 重要な注意事項は引用ブロック（>）で目立たせる
- ✓ 設定項目の比較は表組みで一覧化する
ブログ記事を書く際のコツ
- ✓ 太字（**）で重要なキーワードを強調する
- ✓ 箇条書きでポイントを簡潔にまとめる
- ✓ リンクテキストは「こちら」ではなく内容を示す言葉にする（SEO対策）
- ✓ 長い記事は小見出し（h2、h3）で区切って読みやすくする
- ✓ 画像や図を適度に挿入して視覚的に分かりやすくする