HTMLメール作成時にOutlookで表示崩れしたときのメモ(line-heightなど)
2022/10/19
HTMLメール作成時にOutlookで表示崩れしたときの備忘録
Outlookでメイリオフォントのときにline-heightが効かない件
「mso-line-height-rule: exactly;」を記述する
そのときline-heightはpxで指定する
style="mso-line-height-rule: exactly;line-heigh:20px;"
(「mso-line-height-alt」をあわせて書かないといけないような情報もあったけど、なしで問題なさそう。line-heightをpx指定していないのかも)
参考:
https://blog.kannart.co.jp/coding/1093/
tdで指定する、span,fontタグでは効かない
Outlookで意図しないスペースが挿入される件
特定バージョンで発生
table tdに「mso-table-lspace:0;」と「mso-tablerspace:0;」を記述する
style="mso-table-lspace:0: mso-tablerspace:0;"
<!--[if mso]>
<style type="text/css">
table,td {
mso-table-lspace:0;
mso-table-rspace:0;
}
</style>
<![endif]-->
参考:
https://ascii.jp/elem/000/000/971/971037/
https://willcloud.jp/blog/mail/how-to-create-html-mail/
tableはリセットして使う/余計な空白など
<table width="100%" border="0" cellpadding="0" cellspacing="0">
</table>
使わないでおくもの、ほかメモ
・aタグ、divタグなどはmargin、paddingは効かない
・背景画像、グラデーションは効かない
・上下の余白はimgでspacerを使うのが無難
・spacerを使わない場合はtdにpadding指定
・height指定は効かない場合ある
・line-heightは効かない場合ある
・border-radiusは効かないので角丸でボタンを作った場合はあきらめる
一応ボタン設置するときの記述
tdとaタグにline-height指定してボタンの高さを確保
ボタンの両サイドには空白tdを設置
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td style="font-size:0;"><img src="https://xxxxx/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td width="200"><img src="https://xxxxx/spacer.gif" alt="" width="1" height="44" style="display:block;"></td>
<td align="center" valign="middle" width="200" height="40" bgcolor="#2196f3" style="border-radius:45px;padding:2px 0;">
<a style="border-radius:45px;background-color:#2196f3;color:#ffffff;text-decoration:none;display:block;width:200px;font-size:15px;mso-line-height-rule:exactly;line-height:40px;"
target="_blank" href="xxxxxxxxxxxxxxx">ボタンテキスト</a>
</td>
<td width="200"><img src="https://xxxxx/spacer.gif" alt="" width="1" height="44" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-size:0;"><img src="https://xxxxx/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>
</table>