レスポンシブメール 虎の巻的な個人メモ

はじめに

MSO系（Outlook)からのボトムアップアプローチがおすすめ

全般

• ほぼtable, tr, tdで構成する
• ネストが深くなってもしょうがない
• table要素以外でメーラー共通的に安定していることが確認できた要素は下記のみ

1. img
2. p
3. a
4. span

• 開いたタグは必ず閉じる
• 開閉を確認できるツールを使う
• 条件付きコメントの開閉は目視で確認するしかない
• MSO系は一つの要素に対してクラスは一つしか適用されない
• 二つ目以降はまともなメーラーなら適用される
• 背景色は必ずtable要素のbgcolor属性で指定する
• ボックスを作る場合は、条件付きコメントを使ってMSOはtd、それ以外はdivを使うようにすること
• marginを使わない
• 使うなら要覚悟　バグだらけ
• paddingを使うこと
• 基本的にtd要素に対して適用する
• alignは可能な限りtableの属性で指定する
• vertical-alignもtableのvalignを使った方がベター
• 文字色等のフォント系のスタイルは、テキストノードの直上の親に指定する
  （そうしないと適用されない環境がある）
• img要素には必ずwidth=""を指定すること
• 単位はピクセルだが、px を書いてはならない
• 高さはheight="*"でも大丈夫
• MSO系以外だけを対象にしてcssの.class img等のセレクタでwidth="auto"に指定することができる
• cssのdisplayプロパティは、blockとnoneを基本とし、それ以外を使う場合は必ず動作を確認する
• まともなメーラーはtable-cellも使える（flexboxは無理っぽい）
• inline-blockが使いたい場合はtable要素で代用すると安定する

style要素

• Gmailでエラーが発生するCSSプロパティは別のstyle要素に切り出す
• style要素はhead要素に書くこと

デザイン上の注意

• 一行二列から二行一列に変わる時、右側のボックスを上に持っていくのは困難
• display noneを駆使すればできなくはない……はず
• 同行に幅固定の列がある場合、画面幅が狭くなるほど他の列が潰されることを考慮に入れる
• 複雑なボーダーは引いただけtableのネストが深くなり、メンテが困難になる

おまけ　メーラー厄介度

1. Gmail

• 罠だらけ
• body要素はdivに強制的に置き換えられるので、bodyで指定したものは無視される
• style要素内の文字列が一定のサイズを越えると適用されなくなる
• タグをきちんと閉じないとロクに表示されない
• ブロックしたコンテンツを表示した時の挙動がバグっている（回避不可）
• どうしてもGmailで詰まったら、上記バグも含めてスタイルのインライン化で回避できるかもしれないが、メディアクエリが使えなくなる
• メディアクエリは最初に現れるもの一つしか適用してくれない
• style要素の中でエラーが発生すると、そのstyle要素そのものが無視される
• ツリー表示すると、テキストカラーが謎のあずき色になる場合がある。全てのテキストにcolorを指定すれば回避はできる

1. MSO系（Outlook, Windows10Mail)

• これを作った人は頭がおかしい
• 表示幅を固定して作ることで、慣れればGmailより楽

1. Apple Mail

• たまに表示がおかしい
• 原因不明、修正方法不明の場合が多い

1. その他

• ほぼブラウザと同じ挙動をします