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

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


## デモ
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="nenenene" data-slug-hash="YzyGXQV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="YzyGXQV">
  <span>See the Pen <a href="https://codepen.io/nenenene/pen/YzyGXQV">
  YzyGXQV</a> by NENE (<a href="https://codepen.io/nenenene">@nenenene</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
## コード
該当箇所のみ

```html: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の内容は以下。

```css: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>`で分ける

```html: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]-->

```