レスポンシブHTMLメールで2カラム載せる

レスポンシブメールにおいて、2カラムで記述＋Outlookを考慮した記述を整理する目的で記述。

デモ

See the Pen YzyGXQV by NENE (@nenenene) on CodePen.

## コード該当箇所のみ

test.html

<!-- 2カラム -->	
<!--[if (gte mso 9)|(IE)]>
    <table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="center">
<![endif]-->
<table width="640" border="0" cellpadding="0" cellspacing="0" style="width:100%!important;max-width: 640px;">
<tr>
<td align="center" style="padding:10px 20px;vertical-align: top;">
<!--[if (gte mso 9)|(IE)]>
    <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<div style="width:100%;min-width:300px;max-width:300px;display: inline-block;vertical-align: top;" class="devicewidth">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-size:0;padding:5px;">
    <img src="https://placehold.jp/290x300.png" width="290" style="width:100%!important;display: block;">
    </td>
</tr>
</table>
</div>
    <!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top">
<![endif]-->
<div style="width:100%;min-width:300px;max-width:300px;display: inline-block;vertical-align: top;" class="devicewidth">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr><td style="padding:5px"><img src="https://placehold.jp/290x145.png"  style="width:100%!important;display: block;">
    </td>
    </tr>
    <tr><td style="padding: 5px;"><img src="https://placehold.jp/290x145.png" style="width:100%!important;display: block;">
    </td>
    </tr>
</table>
</div>
    <!--[if (gte mso 9)|(IE)]>
</td>
    </tr>
</table>
<![endif]-->
</td>
</tr>
</table>
    <!--[if (gte mso9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!-- /logo -->    
<!-- /2カラム -->

解説

CSS

スマホ閲覧時に1カラムになるよう、<div>内にclass="devicewidth"を記述。classの内容は以下。

sample.css

	@media only screen and (max-width:480px){
		.devicewidth{width:100%!important;max-width:100%!important;}
	}

HTML

全体を<table>で囲み、各カラムをclass="devicewidth"付きの<div>でそれぞれ囲む
<td align="center" style="padding:10px 20px;vertical-align: top;">：入れ子＋<td>をpaddingで囲むことにより、SP閲覧時のと余白を作る

Outlook用記述

Outlook上での崩れを防ぐため、Outlook上の記述＋<table>で全体を囲み、更に入れ子で囲った上、各カラムを<td>で分ける

sample.html

<!--[if (gte mso 9)|(IE)]>
    <table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="center">
<![endif]-->

<!-- 中略 -->

<!--[if (gte mso 9)|(IE)]>
    <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->

<!-- 中略 -->

    <!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top">
<![endif]-->

<!-- 中略 -->

    <!--[if (gte mso 9)|(IE)]>
</td>
    </tr>
</table>
<![endif]-->

<!-- 中略 -->

    <!--[if (gte mso9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->