はじめに
最近仕事でHTMLメールのレイアウトを設定する機会があったので、HTMLメールを作成するときの注意点や参考サイトなどをまとめました
ベースになるテンプレート
HTMLメールを作るのが初めての人は、そもそもHTMLメールのHTMLってどう書けばいいの？ってなると思うんですが、それについてはGmailの公式サイトの方で説明してくれています。
CSS Support | Gmail Sender Resources | Google Developers
- Gmail公式が紹介しているHTMLメールのテンプレート
<html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } </style> </head> <body> <div id='body'> <p>Hi Pierce,</p> <p class='colored'>This text is blue.</p> <p>Jerry</p> </div> </body> </html>
Gmailについては上記のテンプレートでいいですが、メールクライアントによっては、インラインCSSでないとダメなクライアントもあると思います（調べてませんが）。
そのようなメールクライアントへの対応が必要な場合は、下記のようなCSSをインラインCSSに変換するサービスを使うと便利です。
CSSをインラインCSSに変換してくれるWebサービス「Inline styler」 | ネットショップ運営の気になる備忘録
メールクライアントごとの違い
メールクライアント(Gmail, Outlook, Yahoo!メール...)ごとに、使用できるCSSやHTMLタグが大きく異なるため特に注意が必要です。
- GmailでサポートしているCSSについてまとめているサイト
- Outlookは
<button>使えなかったりで特にシンドイ...
HTMLメールのレイアウトを検証できるサービス
メールアドレスとHTMLメールのテンプレートを入力するとメールを送信してくれるサービスもあります。メールを送信する環境を構築しなくてもレイアウトの確認ができるので便利
