はるらぼ

jQuery、Perl、Linux、デザイン、UI関連の備忘録です。※引用する場合は自己責任で。

【主にOutlook】HTMLメール作成で気をつけること

uHTMLメールの作成で気をつけることなど。
主にOutlook・・・


【参考】各メーラーの対応しているCSS
www.campaignmonitor.com

1.paddingが認識されないことがある

謎現象なんだけども、

<div style="padding: 5px">文章がはいります</div>

ではpaddingが認識されないのに

<div style="border: 1px solid #000; padding: 5px">文章がはいります</div>

では認識されたりする。
でも同時に背景色を指定すると背景色とボーダーの間に、背景無しのpaddingが表示される。よくわからん。

なので下記のようなボタン風リンクは、f:id:haryu0320:20180223103508p:plain
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も認識しないんですね。
このあたりは未解決です(´・ω・`)

良い方法ありましたら教えてください。

2.max-widthが認識されないことがある

これはハックで対応するしかないらしい。むむむ。
www.tam-tam.co.jp

3.フォント

Outlook
通常のWebサイトと同様の指定で良いのか悩ましい。
notoなどのWebフォントは、head内を読み込めるメーラーでは使えるみたいけど
数十MBのフォントを読み込んでもらうのがどうか・・・。

4.のちほど書きます~