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
※注意点※
条件付きコメント内の記述をdivにした場合、幅固定が効きません。
<!--[if gte mso 9]><div style="width: 600px; margin: 0 auto;"><![endif]--> ～～～ <!--[if gte mso 9]></div><![endif]-->↓ tableタグを使いましょう。
<!--[if gte mso 9]><table width="600" style="margin: 0 auto;"><tr><td><![endif]--> ～～～ <!--[if gte mso 9]></td></tr></table><![endif]-->outlookでは、pタグとdivタグのwidthはサポートされていないようです。 閉じタグの部分も条件付きコメントで記述するのを忘れないようにしましょう。 参考：メーラーのCSSサポート状況 CSS Support Guide for Email Clients
レスポンシブHTMLメールの作成の注意点については、以前の記事でも紹介されています。
こちらも参考にどうぞ。
レスポンシブHTMLメールを作成する際の覚書 | Tips Note