Contents
◆コーディングの基本知識
HTMLメールはブラウザで見るHPとは違い、メーラー（メールアプリ）で見るものです。
多くのメーラーはブラウザほど高機能で無いため、HTMLに対する対応がかなり遅れています。特に最も利用されているGmailでの対応が遅れていることが多くの制作者を悩ませています。
※最近Gmailが待望のスタイルタグに対応したためかなり制作しやすくなりました。
最近ではHTMLメールの増加に伴い、各メーラーもかなり対応が進みましたが、まだ一昔前のブラウザという感じですので、コーディングには注意が必要です。
2017年現在、HTMLメールのスタンダードは次のようになっています。
ドキュメントタイプ
HTML4.01 Transitional / XHTML1.0 Transitional
レイアウト
基本はTABLEタグで構成。
※高さや位置などもスタイルではなくTABLE属性で指定。
レスポンシブデザイン
可能。viewportは利用できます。
全体の最大サイズ
600px だとほぼ安全。
※当然レスポンシブデザインにした場合。
文字コード
iso-2022-jp、UTF-8
基本的にiso-2022-jpですが、現在はUTF-8でもほぼ大丈夫です。
外部ファイル
避ける。現時点では読み込まれない可能性が高い。
※<LINK>タグは使えない場合が多い。
◆検証環境
主要なメーラーは
・Gmail
・Outlook
・yahoo!メール
・Thunderbird
この内、GmailとOutlookで正常に表示されれば大体OK。
※iOS、Androidなどは個別に検証する必要がある。
厳密に動作検証したい場合は実際に送信して確認する必要がある。
もしくは、以下のような検証ツールもある（有償）。
●Litmus
https://litmus.com/
◆HTMLメールのコーディングにおけるポイント／注意点
- できる限る軽くする。（圧縮必須）
- Outlookはmax-witdhが利かない。
→幅を固定するならTABLEで指定。→レスポンシブはできないくなる。
or
→幅を固定しない。→レスポンシブになるが、横長になるので見にくくなる可能性がある。 - YahooメールはPタグの改行スペースが無視される（詰められる）。
→styleのpadding-bottomか<br><br>で対応する。
→<style>タグでセレクタPにpadding-bottomを指定する方法が一番うまくいく。
◆まず最初に決めなければいけないこと
◆重要タグ
◆備忘録
多くの場合、Outlookが鬼門となる
Outlookは今だに会社で利用されている場合が少なくない。
OutlookはCSS上の制限が多いので、Outlookでどこまでできるようにするかで大きく作業量が変わる。
ポイント
yahooメールはPタグの改行余白が無視される
解決策としては<div style=”padding-bottom:～”>か<br><br>で対処。
他のメーラーを考慮すると<br><br>が確実。