【主にOutlook】HTMLメール作成で気をつけること
uHTMLメールの作成で気をつけることなど。
主にOutlook・・・
【参考】各メーラーの対応しているCSS
www.campaignmonitor.com
１．paddingが認識されないことがある
謎現象なんだけども、
<div style="padding: 5px">文章がはいります</div>
ではpaddingが認識されないのに
<div style="border: 1px solid #000; padding: 5px">文章がはいります</div>
では認識されたりする。
でも同時に背景色を指定すると背景色とボーダーの間に、背景無しのpaddingが表示される。よくわからん。
なので下記のようなボタン風リンクは、
aタグにpaddingを設定してもOutlookでうまく認識されないので
borderを設定し太さで余白を表現すると良さそう。
border-radiusで角丸もOutlookをはじめ、認識しないメーラー多いけども・・・。
（liveメールとか。yahooはブラウザもスマホアプリもダメっぽい。）
<a href="#" target="_blank" style="background-color: #315DAF; border: 20px solid #315DAF; color: #ffffff;">詳しくはこちら</a>
これで少しはマシかな。と思ったら、今度はボーダーの太さを10pxくらいまで？しか認識していない気がします・・・。
<div style="background-color: #315DAF;> <a href="#" target="_blank" style="border: 1px solid #315DAF; color: #fff; display: block; padding: 20px 60px;">詳しくはこちら</a> </div>
最終的にこんな感じに・・・
display:inline-blockも認識しないんですね。
このあたりは未解決です(´・ω・｀)
良い方法ありましたら教えてください。
２．max-widthが認識されないことがある
これはハックで対応するしかないらしい。むむむ。
www.tam-tam.co.jp
