HTML メールテンプレートの正しい書き方#
Web プロジェクトにおいて、HTML メールテンプレートはウェブページのように書いてはいけません。
一部のクライアント（例えば QQ メール）では正常に表示されても、Gmail や Outlook ではスタイルが崩れることが容易にあります。
メールが主流のクライアントで一貫性を保つためには、実行可能な方法は一つだけです。
核心結論#
HTML メールテンプレートは次のようにする必要があります：
tableをレイアウト構造として使用- すべてのスタイルをインラインスタイルで記述
- 明確にサイズを指定する（width /padding/font-size）
これは現在、Gmail、Outlook、Apple Mail、QQ メールに互換性のある唯一の安定した方法です。
推奨書き方（実践ルール）#
1. レイアウトに table を使用#
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 24px;">
コンテンツエリア
</td>
</tr>
</table>
div + flex / grid を使用してレイアウトを行うことは避けてください。
2. すべてのスタイルはインラインスタイルを使用#
<p style="margin:0;font-size:14px;line-height:20px;color:#354052;">
本文内容
</p>
以下に依存しないでください：
<style>タグ- class / selector
- 外部 CSS
3. 画像サイズは明示的に指定する必要があります#
<img src="logo.png" width="68" style="display:block;width:68px;height:auto;" />
画像が一部のクライアントで自動的に拡大またはレイアウトを崩すことを避けてください。
4. 「最悪のクライアント」に合わせて設計#
特定のクライアントが最新の CSS をサポートしていても、Gmail / Outlook のレンダリング能力を最低基準とすべきです。
結語#
HTML メールはウェブページのレンダリング環境ではありません。
table + inline style を使用することは時代遅れではなく、現在唯一の信頼できるエンジニアリングプラクティスです。
メールがユーザーに安定して届く必要があるとき、互換性はコードの「優雅さ」よりも優先されます。