レスポンシブ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]-->