HTMLメール作成で調べたことまとめ

HTMLメールのお仕事がきて調べたことまとめ

htmlメールを作成してお客様にhtmlファイルを納品するところまでの調査。

注意点

• 基本的にテーブルコーディング
• CSSはインライン
• 全体のサイズは600pxで作る
• 画像はサーバーにアップして絶対パスで入れる。読み込みを早くするために画像圧縮必須
• pngではなくgifやjpgを使用する
• 画像読み込みもhtmlサイズも容量が大きいと重いしスパム扱いされるといやだしなるべく軽くする
• 文字の自動調整をしないようにbodyにsize-adjust必須（noneじゃなく100%で）
• viewportにinitial-scale=1をいれるとAndroidで解釈がおかしくなる
• レイアウトで段組やカラム分けしたいときはtableの入れ子で作る
• メーラーによってはキャッシュが根強いので配信後に修正を送り直しても「画像が変わらないよー」って言われるので厳密にするなら画像にクエリストリングでバージョンとか付与してあげて再送する

メールクライアント個別注意点

共通

• cssのコーディングによってはメールクライアントごとに見えかたが違うのでCSS対応状況を確認しながら実装する
  • 各メーラーのcss対応状況
    The Ultimate Guide to CSS

Gmail編

• Gmail（Web）で画像の使い回しをすると2度目以降が表示されない。spacer.gifみたいなのも使いたい場合はリネームして使うかtdのheightとか調整する。
• Gmail（Web）をスマホで開くとGmailの枠からhtmlメールの内容がはみ出る。崩れはしない。他社のhtmlメールでこれに対応しているサンプルが見つからなかったので今後お客様に突っ込まれたら再検証
• Gmailはposition:absoluteやネガティブマージンは使えない
• Android版Gmail（app）でline-heightを指定しても行間がぎゅっとつまることがある（OSかappのバージョンによる？）line-height: 100!important;を該当箇所にいれて、行間調整用のhtight付きtdをbr代わりに入れて対応した。参考 → Email Line-height - Android Gmail Not working

Mac標準メール（デフォルトで入ってるアレ）編

• Mac標準メールで画像が実サイズで表示されるのを防ぐには、インラインCSSでサイズを記述

iOSの標準メーラー編

• iOSの標準メーラーだと親要素を%指定すると、画像が外枠からはみ出るので枠は固定幅入れた方がいい ← ハマったやつ

Outlook編

• Outlook（2007／2010／2013）がfloatやbackground-imageなど未対応。vmlを使うと背景画像を入れれるらしい？ 未検証 → HTMLメールコーディングの鬼門、outlook2007へ背景画像を。
• Outlook2010が固定幅でレスポンシブ非対応なのでリキッドレイアウトを意識した固定幅で作成する。レイアウト用にマルチクラスでスタイル作っておくと便利だった
• Outlook2010はpaddingに不具合があるのでなるべくmarginやheight指定で間隔をいれる。ベストはtdのheigh指定
• Outlookはレンダリングがwordと同じ。Outlook2007はアニメーションGIFは自動で動かず、一番最初のフレームの静止画になる。なぜかOutlook2003では動くらしい
• Outlook2007でアニメを動かすには
  「表示」 → 「プレビューとプロパティ」を押す。または「メッセージ」→「その他のアクション」→「ブラウザで表示」をやらないと動かない。

備考