はじめに
MSO系（Outlook)からのボトムアップアプローチがおすすめ
全般
- ほぼ
table, tr, tdで構成する- ネストが深くなってもしょうがない
-
table要素以外でメーラー共通的に安定していることが確認できた要素は下記のみimgpaspan
- 開いたタグは必ず閉じる
- 開閉を確認できるツールを使う
- 条件付きコメントの開閉は目視で確認するしかない
- 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のネストが深くなり、メンテが困難になる
おまけ メーラー厄介度
-
Gmail
- 罠だらけ
-
body要素はdivに強制的に置き換えられるので、bodyで指定したものは無視される -
style要素内の文字列が一定のサイズを越えると適用されなくなる - タグをきちんと閉じないとロクに表示されない
- ブロックしたコンテンツを表示した時の挙動がバグっている（回避不可）
- どうしてもGmailで詰まったら、上記バグも含めてスタイルのインライン化で回避できるかもしれないが、メディアクエリが使えなくなる
- メディアクエリは最初に現れるもの一つしか適用してくれない
- style要素の中でエラーが発生すると、そのstyle要素そのものが無視される
- ツリー表示すると、テキストカラーが謎のあずき色になる場合がある。全てのテキストに
colorを指定すれば回避はできる
-
MSO系（Outlook, Windows10Mail)
- これを作った人は頭がおかしい
- 表示幅を固定して作ることで、慣れればGmailより楽
-
Apple Mail
- たまに表示がおかしい
- 原因不明、修正方法不明の場合が多い
- その他
- ほぼブラウザと同じ挙動をします