HTMLメール作成時にOutlookで表示崩れしたときのメモ(line-heightなど)

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>