Outlook(Windows)のHTMLメールで特定CSSやボタンタグが効かない

構成

• PHP 7.0
• php module sendmail

メールクライアント

• Windows 10 Office 365 Outlook for Desktop

原因

一部のタグ・CSSが対応していないことが原因

対処法（CSS）

外部CSSを利用せず、インラインで記述する。
※CSSの対応リストが探しても見つからず、もし見つかったらコメント頂きたいです。

対処法（ボタンタグ）

HTMLに <!--[if mso]> ~~mso用のHTMLタグ~~ <![endif]--> でMSO用のタグを記載する。

ボタンタグ

VML形式で記載が必要。こちらのサイトでコードが作れます。
https://buttons.cm/

サンプルコード

<!--[if mso]>
    <div style="line-height:1em;">
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:48px;v-text-anchor:middle;width:240px;max-width:350px;line-height: 48px;" arcsize="50%" stroke="f" fillcolor="#ffa500">
        <w:anchorlock/>
        <center>
        <a href="http://example.com" style="background-color:#ffa500;border-radius:20px;color:#ffffff;display:inline-block;font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;font-size:13px;font-weight:bold;line-height: 48px;text-align:center;text-decoration:none;width:240px;max-width:350px;-webkit-text-size-adjust:none;">
            ボタンのテキスト
        </a>
        </center>
        </v:roundrect>
    </div>
<![endif]-->

Outlookの時だけ非表示したい要素を指定する

mso-hide: all を使用する。

サンプルコード

<!--[if mso]><div style="mso-hide: all"><![endif]-->
<div style="mso-hide:all;">他のメールクライアントに表示するコード</div>