メール向けMarkdown to HTML

通常のHTMLがメールで崩れる理由

メールクライアントはブラウザではありません。多くのクライアントは<style>ブロック、外部スタイルシート、そして最近のCSSの大半を無視したり除去したりします。ウェブページでは完璧に見えるHTMLも、受信箱ではデフォルトのフォント、余白の欠如、崩れたテーブルとして届くことがあります。

確実な方法は、style属性を使って各要素に直接スタイルを指定することです。それを行うのがメール向け出力モードです。

コンバーターが変更する内容

オプションでメール向け（インラインスタイル）を選ぶと、Markdownは通常どおり変換された後、すべての要素にインラインスタイルが追加されます：

<p style="margin:0 0 16px;font-size:16px;line-height:26px;color:#333333;">
  Hello from Markdown.
</p>

• 見出し、段落、リンク、リスト、引用、コード、テーブル、水平線に、明示的なサイズ、余白、色が設定されます。
• メールクライアントはクラスベースのスタイルを反映しないため、シンタックスハイライト用のクラスは無効になります。
• 出力はフラグメントです。メールやニュースレターの編集画面の本文にそのまま貼り付けてください。

使い方

1. メール向け出力を選択した状態のコンバーターを開きます。
2. Markdownを貼り付けるか入力します。
3. プレビューを確認し、Copy HTMLを選択します。
4. メールツールのHTMLエディタまたはソースエディタに貼り付けます。

送信前に確認すること

• 画像には絶対URLを使用してください（https://…）。alt属性も必ず記載してください。相対パスは受信箱では解決されません。
• 自分宛にテストメールを送ってください。Gmail、Outlook、Apple Mailはそれぞれ表示のされ方がわずかに異なり、特にWindows版Outlookは注意が必要です。
• シンプルに保ってください。1カラムのコンテンツは確実に変換されます。複雑な複数カラムのレイアウトには専用のメールテンプレートが必要です。
• ダークモードにも注意してください。一部のクライアントは自動的に色を反転するため、両方のモードでコントラストを確認してください。
• サニタイズは有効のままにしてください。Markdownの出所を完全に信頼できる場合を除きます。

できないこと

このコンバーターはコンテンツのスタイルを整えるものであり、レイアウトを組むものではありません。ヘッダー、フッター、ボタン、カラムシステムは含まれません。メッセージの文章中心の本文部分に使用し、それ以外はメールプラットフォームのテンプレートと組み合わせてください。