htmlのcssでは各社で使えないプロパティがある

gmail,yahooメールまで今回は対応していたのですが、各社対応しているCSSのプロパティが違います。
ローカルでmailcatcherやメールのhtml吐き出して確認しているものが、そのままそれらのCSSが適用されるわけではなく、適用できないCSSはremoveされてしまうため、作成したメールのデザインと違うメールコンテンツが出来てしまう可能性があります。

それぞれ使えるプロパティを調べるためには、こちらのサイトが便利です。
https://www.caniemail.com/search/

また、gmailはこちらで対応しているCSSプロパティは公開されています。
https://developers.google.com/gmail/design/reference/supported_css

gmail

flexboxは使えるけど、align-itemsなどは使えない
- floatにしたり、inline-blockにしたり、やりたいことに応じて、色々修正・・・・
svgが使えない
- 画像に置き換え

gmailの場合、css2のプロパティまでしか対応していないようでそのため、displayの中のflexboxは使えますが、align-itemsは使えないようです。
https://developers.google.com/gmail/design/reference/supported_css

yahooメール

linear-gradient が使えない
- background-imageで対応
- ただ、yahooメールでbackground-imageが完全対応していないようで、反映されないユーザーもいるため、背景色を合わせるために同様のbackground-colorをいれています。
remが使えない
- pxに置換
box-sizing: border-box; が使えなくて、padding分はみ出してしまう。
- 100%を超えないように、paddingの調整

その他

サイドバー分でmedia queryの基準がずれる
- media queryの基準を大きめにとって、崩れることはないようにする

このように、HTMLメールでは、想定していない部分で崩れることがあるので、早めに確認しつつ調整していくこと、調整が難しい場合担当者と早めにメールの比率を見つつ調整していくことが必要そうです。