HTMLメールのコンテンツ幅について
<!-- コンテンツエリア -->
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;">
<!-- ここにコンテンツを入れていきます。 -->
</table>
はじめに画像やテキストを入れる大枠の<table>を用意します。
<table>タグにはwidthは指定しないでください。
指定するとスマホで見た時に横幅および文字サイズなどが最適化されません(画面幅に合わせてレスポンシブされなくなります)
styleの max-width:600px; で最大幅を設定します。
コンテンツエリアの背景色は白としています。CSSが効かないメーラーを考慮して bgcolor="#ffffff" で指定しています。
また、行間の調整をするために line-height:100%; を指定しています。
コンテンツは <!--ここにコンテンツを入れていきます。--> に記載するようにしてください。
前回の文字サイズについてのタグを入れた場合、下記のようになります。
<!-- コンテンツエリア -->
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;">
<!-- ここにコンテンツを入れていきます。 -->
<!-- テキスト -->
<tr>
<td width="600"><span style="color:#333333;font-size:18px;font-weight:bold;line-height:150%;">見出しが入ります。</span><br>
<span style="color:#333333;font-size:14px;line-height:150%;">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></td>
</tr>
</table>
<td>タグにはwidthを指定してください。
指定しなければテキスト量に合わせて幅が変わってしまいます。