PC・スマホで最適化されたHTMLメールの作り方をベース編、基礎編1、基礎編2とお届けしてきましたが、まだ他にも様々なレイアウトの組み方がありますのでご紹介します。

応用編（2018年12月上旬検証時の情報です）

毎回おさらいとなりますが、600px幅のHTMLメールを作っています。スマホで見た時は画面幅いっぱいに文字サイズなど最適化された状態で表示されます。
以下の内容はこれまでに記載したものを差し替えたり、追加してご使用ください。

ボタン

<!-- ボタン -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560" align="center">
<!-- ボタン本体ここから -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#e60012" style="border-radius:3px;">
<tr>
<td width="300" height="50" align="center"><a href="#" target="_blank" style="display:block;height:50px;color:#ffffff;font-size:16px;font-weight:bold;line-height:50px;text-decoration:none;">リンクテキストは全角１６文字まで</a></td>
</tr>
</table>
<!-- ボタン本体ここまで -->
</td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>

詳細はこちらなどのリンクによく使われるボタンです。

・真ん中のtdタグ

align=”center”　ボタンがセンタリングするように、真ん中の要素に対してalignを指定しています。

・ボタン本体のtableタグ

bgcolor=”#e60012″ style=”border-radius:3px;”　bgcolorで背景色を、角丸になるようstyleでborder-radius:3pxを指定しています。ただし、CSSが効かないメーラーでは角丸にはなりません。四角いボタンになります。

・ボタン本体のtdタグ

width=”300″ height=”50″ align=”center”　ボタンの幅と高さはtdタグに指定します。またテキストがセンタリングするようにalignも指定しています。

・aタグについて

display:block;height:50px;　ブロック要素にし、高さを指定することでボタンすべての部分がクリッカブルになります。なお、CSSが効かないメーラー（Outlook）ではテキスト部分しかクリッカブルになりません。
line-height:50px;　上下のセンタリングをするように指定しています。
text-decoration:none;　リンクテキストの下線を消しています。

また、ボタンのテキストは1行で収まるように全角16文字までとしてください。文字数を増やしたい場合は文字サイズなどCSSを調整する必要があります。

背景色がついたコンテンツ1

<!-- 背景色がついたコンテンツ1 -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560" bgcolor="#dddddd">
<!-- 背景色がついたエリアここから -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:0;" colspan="3"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="520"><span style="color:#333333;font-size:14px;line-height:150%;">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" colspan="3"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
</table>
<!-- 背景色がついたエリアここまで -->
</td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>

こちらは基礎編2の続き、コンテンツエリア内に入れた場合です。見出しやテキストと同様に左右に白背景の余白が入ります。

・真ん中のtdタグ

bgcolor=”#dddddd”　真ん中のtdタグに背景色をつけます。CSSは効かないものがありますので、bgcolorで指定してください。

背景色がついたエリア内には上下左右に余白を作るため、tableタグを追加します。CSSでmargin・paddingを使用すると余白が確保されないメーラーがありますので、spacer.gifで確保するようにしてください。

背景色がついたコンテンツ2

<!-- 背景色がついたコンテンツ2 -->
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#dddddd" style="max-width:600px;line-height:100%;">
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<!-- テキストここから -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560"><span style="color:#333333;font-size:14px;line-height:150%;">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<!-- テキストここまで -->
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
</table>

こちらはコンテンツエリアの外に記述するものです。コンテンツ幅600px全体に背景色をつけた場合です。主にフッターエリアやコピーライトなどに使用します。

・tableタグ

bgcolor=”#dddddd”　基礎編2のコンテンツエリア同様、大枠のtableタグに背景色を指定します。

あとは上下の余白をspacer.gifで確保し、テキストなどを入れてください。

枠がついたコンテンツ

<!-- 枠がついたコンテンツ -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560">
<!-- 枠がついたエリアここから -->
<table border="0" cellpadding="0" cellspacing="0" style="border:2px solid #e60012;">
<tr>
<td style="font-size:0;" colspan="3"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="516"><span style="color:#333333;font-size:14px;line-height:150%;">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" colspan="3"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
</table>
<!-- 枠がついたエリアここまで -->
</td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="20" style="display:block;"></td>
</tr>

こちらはコンテンツエリア内に入れた場合です。背景色がついたコンテンツ1とほとんど同じです。異なる箇所のみ解説します。

・真ん中のtdタグの中に入れるtableタグ

style=”border:2px solid #e60012;”　罫線はCSSで調整します。Outlook2010・2013でも有効となるため使用しています。実装がとてもラクです。

・テキストを入れるtdタグ

width=”516″　左右に罫線が入るため、罫線の幅分だけ引きます。今回は2pxの罫線なので左右合わせて4px分引いています。

枠がついたコンテンツはコンテンツエリアの外に出してしまうと、スマホなど画面いっぱいに表示される端末の場合、枠が画面端に引っ付いてしまってわかりにくくなるため、コンテンツエリア内での使用をおすすめします。

応用編は以上となります。
基本的にソースをコピペしていただいたらHTMLメールのテンプレートが作れます。複雑なことがしたい場合は、各メーラーの特性を知っていないと表示崩れに繋がることが多いです。そして、HTML＆CSSを使ったWebサイト同様のコーディングをした場合は、なおさら表示崩れの原因となり悲惨なことになります。こちらを使用していただくことでコーダーの皆さまが少しでも簡単に作れるようになっていただければいいなと思っています。
2カラムにする方法などはまた機会あればご紹介します。

HTMLメール作成の予定がございましたらご依頼いただけますと幸いです。お問い合わせはこちら