1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-20

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?