レスポンシブ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]--><tablewidth="640"border="0"cellpadding="0"cellspacing="0"style="width:100%!important;max-width: 640px;"><tr><tdalign="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]--><divstyle="width:100%;min-width:300px;max-width:300px;display: inline-block;vertical-align: top;"class="devicewidth"><tablewidth="100%"border="0"cellpadding="0"cellspacing="0"><tr><tdalign="center"style="font-size:0;padding:5px;"><imgsrc="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]--><divstyle="width:100%;min-width:300px;max-width:300px;display: inline-block;vertical-align: top;"class="devicewidth"><tablewidth="100%"border="0"cellpadding="0"cellspacing="0"><tr><tdstyle="padding:5px"><imgsrc="https://placehold.jp/290x145.png"style="width:100%!important;display: block;"></td></tr><tr><tdstyle="padding: 5px;"><imgsrc="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の内容は以下。
cample.css
@mediaonlyscreenand(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]-->