HTMLメールを作成する際、レスポンシブやリキッド対応を求められることが多くなりました。

リキッドレイアウトのHTMLメールでは、外側の要素にmax-widthで最大幅の指定をして、中の要素は固定せずにパーセント指定でコーディングすることが多いのではないでしょうか。

しかし、outlookではmax-widthのCSSがサポートされていません！

PCモニターなど大画面で見るとmax-widhtが効かずに100%のまま横いっぱいに伸びてしまい、
センタリングや右寄せにしていた要素が、左寄せのテキストとかなり離れた位置になってしまいます。

こんな感じですね。

そんなoutlookで幅固定をする対処法をご紹介いたします。
　

IEの条件付きコメントの書き方が、outlookにも使えます。

<!--[if gte mso 9]>
＝＝＝＝outlookのみ対応＝＝＝＝
<![endif]-->

　　
下記のように記述することで、
outolookのときだけ幅を固定にすることができます。
（その代わり、outlookではリキッドで可変することはできなくなります。）

<center>
<!--[if gte mso 9]><table width="600" style="margin: 0 auto;"><tr><td><![endif]-->
<div style="max-width: 600px; min-width: 320px; margin: 0 auto;">
<table width="100%">
＝＝＝＝メールのコンテンツ＝＝＝＝
</table>
</div>
<!--[if gte mso 9]></td></tr></table><![endif]-->
</center>

　
outlook用に、幅を固定したtableの開始タグと、コンテンツの最後には閉じタグを用意し、
それぞれ条件付きコメントで囲みます。
　
・[if gte mso 9]
msoバージョン9以上を対象とする指定です。
　
outolookのバージョンについては下記に記載があります。
Outlook Conditional CSS | Email Design Reference
　
　

<!--[if gte mso 9]><div style="width: 600px; margin: 0 auto;"><![endif]-->
～～～
<!--[if gte mso 9]></div><![endif]-->

<!--[if gte mso 9]><table width="600" style="margin: 0 auto;"><tr><td><![endif]-->
～～～
<!--[if gte mso 9]></td></tr></table><![endif]-->

　
　
レスポンシブHTMLメールの作成の注意点については、以前の記事でも紹介されています。
こちらも参考にどうぞ。
レスポンシブHTMLメールを作成する際の覚書 | Tips Note