Markdownプレビュー/HTML変換ツール

Markdownプレビュー/HTML変換ツールの概要

Markdown（マークダウン）は、見出し・リスト・リンクなどの装飾を「#」「-」「[ ]」といった軽量な記号だけで表現できる簡易マークアップ言語です。本ツールはMarkdown形式で書いたテキストをリアルタイムでHTMLに変換しプレビュー表示できる双方向エディタで、HTMLからMarkdownへの逆変換にも対応しています。GitHub Flavored Markdown（GFM）の主要な記法（テーブル、取り消し線、チェックリスト、コードブロック）をサポートしているため、READMEや技術ブログの下書きにそのまま使えます。すべての処理はブラウザで完結します。

対応するMarkdown記法

使い方の流れ

1. 画面上部のタブで「Markdown → HTML」または「HTML → Markdown」を選択します。初めて使う場合は「サンプルを入力」で例文を読み込むと記法のイメージがつかめます。
2. 左側の入力欄にテキストを貼り付けるか、直接タイピングします。入力するそばから右側のプレビュー欄に整形結果が表示されます。
3. 「プレビュー」「HTMLソース」のボタンで、見た目とHTMLコードの表示を切り替えられます。デザインの確認とコード取得を一画面で行えます。
4. 「HTMLをコピー」ボタンで結果をクリップボードに転送します。WordPressのカスタムHTMLブロック、メールHTML、社内Wikiなどに直接貼り付けられます。
5. 必要に応じて「クリア」ボタンで入力欄をリセットし、別の文章で繰り返し使えます。

こんな場面で使う

• GitHub README/技術ブログの下書き：オフラインで書いておいたMarkdownの見栄えを公開前に確認できます。コードブロックや表の崩れをプッシュ前に発見できます。
• WordPress/Note/Qiitaへの記事投稿：MarkdownをHTML化してから貼り付けることで、各エディタの揺れに左右されず一貫した見栄えを再現できます。
• HTMLメール・社内通知の作成：プレーンテキストで書いた文章を、太字・リスト・引用付きのHTMLメールに変換して送れます。
• HTMLからMarkdownへの逆変換：既存のHTML記事をMarkdownベースの管理（GitHub・Hexo・MkDocsなど）に移行する際の前処理に使えます。
• 会議メモの整形：箇条書きで殴り書きしたメモをMarkdownとして書いておけば、後でHTMLに変換して議事録として共有できます。

使う前に知っておきたい注意点

• 本ツールはGFMの主要記法に対応していますが、サイトごとの拡張記法（Qiitaの :::note ::: など）は変換できません。プラットフォーム特有の記法は、貼り付け先のエディタで再調整してください。
• HTML → Markdown変換は基本的なタグ（h1〜h6、p、ul/ol、a、img、strong、em、code、pre、table）に対応します。複雑なCSS指定、divの入れ子、iframeなどは変換対象外で、そのまま残るかスキップされます。
• セキュリティ上、変換後HTMLには<script>タグやインラインの onload="..." のようなイベントハンドラは含まれません。動的に動くHTMLが必要な場合は、生成されたHTMLを土台に手動で追加してください。
• 大きすぎる入力（おおむね数MB以上）は、ブラウザの動作が重くなる場合があります。大量のテキストは分割して変換することを推奨します。
• Markdownの仕様には複数の方言（CommonMark、GFM、MultiMarkdownなど）があり、本ツールはGFMベースで動作します。CommonMark厳格仕様で書かれた一部の記法（特殊なリンク参照や脚注）は意図通りに変換されない場合があります。

用語の補足

• Markdown：2004年にJohn GruberがAaron Swartzと共同で考案した軽量マークアップ言語。プレーンテキスト感覚で書けるのが特徴です。
• GFM（GitHub Flavored Markdown）：GitHubが採用するMarkdown方言。テーブル・取り消し線・チェックリスト・自動リンクなどの拡張が含まれます。READMEの事実上の標準です。
• CommonMark：Markdownの曖昧な仕様を厳密に定義した標準。多くのMarkdownライブラリ（marked、markdown-it、commonmark.js）が準拠しています。