ここまでPC・スマホで最適化されたHTMLメールの作り方を、ベース編、基礎編1とお届けしてきました。今回の基礎編2ではメインコンテンツとなるパーツを一つずつ紹介させていただきます。基礎編1を読んでいる前提でこちらの記事は書いていますので、合わせて読んでいただければ幸いです。

基礎編2（2018年12月上旬検証時の情報です）

前回のおさらいになりますが、600px幅のHTMLメールを作っています。スマホで見た時は画面幅いっぱいに文字サイズなど最適化された状態で表示されます。
以下の内容は基礎編1で記載したもの（プリヘッダー・リンクテキスト）の後に続けて書くようにしてください。

コンテンツエリア

<!-- コンテンツエリア -->
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;">
<!-- ここにコンテンツを入れていきます。 -->
</table>

はじめに画像やテキストを入れる大枠を用意します。

・tableタグ（基礎編1のおさらい）

widthは指定しないでください。指定してしまうとスマホで見た時に文字サイズなどが最適化されません。
styleの max-width:600px; で最大幅を設定しています。
コンテンツエリアの背景色は白とします。CSSが効かないメーラーを考慮して bgcolor=”#ffffff” で指定しています。
行間の調整をするために line-height:100%; を指定しています。

これより以下は、<!– ここにコンテンツを入れていきます。 –>に記載するものになります。

横幅いっぱいの画像

<!-- 横幅いっぱいの画像 -->
<tr>
<td width="600" style="font-size:0;"><img src="img/main.jpg" width="600" alt="" style="display:block;width:100%;max-width:600px;height:auto;"></td>
</tr>
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>

・tdタグ（基礎編1のおさらい）

style=”font-size:0;”　画像を入れるtdタグに指定してください。画像の下に出来る余白を消します。line-height:0; はOutlook2010・2013で画像の上部が1px欠けるため、使用しないようにしています。
width=”600″　Outlook2010・2013はCSSが効かないので、tdタグにコンテンツ幅の最大値を設定します。

・imgタグ

width=”600″　幅を指定しないとOutlook2010・2013では、画像本来の幅に変わります。幅600pxではない画像を使用する際は必ず指定してください。
display:block;　画像の下に出来る余白を消します。tdタグのCSSが効かないメーラー用に2重の対策をしています。
width:100%;max-width:600px;height:auto;　スマホで見た時、画面幅に合わせて幅と高さを調整するように指定しています。
なお、Outlook2010・2013ではstyleが効きませんので、widthとstyleで2重設定することを忘れないようにしてください。
画像をリサイズして横幅600pxにしている場合のみ、width=”100%” style=”display:block;”と省略することも可能です。

スペーサー（spacer.gif）については基礎編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"><span style="color:#333333;font-size:18px;font-weight:bold;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="5" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="5" style="display:block;"></td>
</tr>

見出しの両サイドに20pxずつ余白を作ります。そのため、tdタグの中にtableを追加して余白・テキスト・余白の3カラムにし、tdタグのwidthの合計が600になるようにしています。

・見出し両サイドのimgタグ

width=”10″ height=”1″　余白のスペーサーには幅と高さを指定します。widthはスマホで見た時にどれくらい余白を確保したいかで設定します。今回は10px確保するようにしています。heightは指定しないとwidthに比例して増えますので、余計な高さが出ないように1pxとしています。

・spanタグ

color:#333333;font-size:18px;font-weight:bold;　見出しの文字色、文字サイズ、文字の太さを指定しています。
line-height:150%;　行間を調整しています。

tdタグにstyleを書けばいいのではと思いますが、tdタグだと行間調整など効かないCSSもあるため、spanタグで括るようにしています。

テキスト

<!-- テキスト -->
<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>
<tr>
<td style="font-size:0;" class="space"><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" 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>

見出しとテキスト同様に両サイドに余白を設け、真ん中に横幅300pxのボタンを配置します。横幅300pxなので左右の余白はいらないのではと思われるかもしれませんが、スマホで確実に左右の余白を確保するために設定しています。念には念をという安全策です。

・真ん中のtdタグ

align=”center”　ボタンを真ん中に設置するため、alignで位置を指定しています。

・ボタン本体のtableタグ

bgcolor=”#e60012″ style=”border-radius:3px;”　ボタンの色をbgcolorで指定しています。styleで角丸になるようにしていますが、これはOutlook2010・2013では効きません。四角いボタンになります。

・ボタン本体のtdタグ

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

・aタグ

href=”#”　適宜リンク先を指定してください。
target=”_blank”　メーラーではなくブラウザで見ている人もいますので、別ウィンドウまたは別タブで開くように_blankを指定してください。
display:block;height:50px;　aタグ全体をクリックできるようブロック要素にし、高さを指定しています。なお、こちらもOutlook2010・2013では効きませんので、テキスト部分だけがクリックできます。
color:#ffffff;font-size:16px;font-weight:bold;　文字色、文字サイズ、文字の太さを指定しています。
line-height:50px;　行間をボタンの高さと同じにすることで、高さの真ん中に表示するようにしています。
text-decoration:none;　テキストリンクの下線を消しています。

基礎編2はここまでとなります。
これまでに紹介したパーツを組み合わせればいろいろなレイアウトが組めると思います。次回応用編では特定のコンテンツに背景色をつけたり枠で囲んだり、画像とテキストを横並びにしたものなどをご紹介できればと思っています。