HTMLメルマガ作成時に注意すること

HTMLメルマガを作成することがちょくちょくあるので、作成するときの個人的な注意点をいくつかまとめてみます。

テーブルレイアウト+インラインCSSで実装

対応するメーラー数が多く、さらに各々のCSS対応状況や解釈が異なるので、テーブルレイアウトとインラインCSSで崩れないようにがっちり固めて組みます。

サンプル

<table width="750" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="75" valign="top"><img border="0" src="http://cly7796.net/spacer.gif" width="75" height="30" alt="" /></td>
<td width="600" valign="top"><a href="http://cly7796.net/" target="_blank"><img border="0" src="http://cly7796.net/a.jpg" width="600" height="30" alt="" /></a></td>
<td width="75" valign="top"><img border="0" src="http://cly7796.net/spacer.gif" width="75" height="30" alt="" /></td>
</tr>
</table>

できるだけ画像にする

画像にできる所はできるだけ画像で組んだ方が楽です。
また、その際余白部分も画像に含めるなら含んでしまった方が、ずれたりするのを防ぐことが出来ます。

font-size:0;とvertical-alignの指定

作成後にテスト送信してみると、画像の間に隙間ができてしまう場合があります。(特にOutlook)
そういった場合、font-size:0;とimgにvertical-alignを指定すると解消することが多いです。
(テキストが含まれない場合に限ります。)

ただ、画像が表示されなかったときにfont-size:0;だとaltテキストが表示されない気がするので、vertical-alignを設定してみて、まだ隙間が出るようならfont-size:0;も追加、みたいなほうがいいかもしれません。

サンプル

<table width="750" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="75" valign="top" style="font-size:0;"><img border="0" src="http://cly7796.net/spacer.gif" width="75" height="30" alt="" style="vertical-align:top;" /></td>
<td width="500" valign="top" style="font-size:0;"><a href="http://cly7796.net/" target="_blank"><img border="0" src="http://cly7796.net/a.jpg" width="600" height="30" alt="" style="vertical-align:top;" /></a></td>
<td width="75" valign="top" style="font-size:0;"><img border="0" src="http://cly7796.net/spacer.gif" width="75" height="30" alt="" style="vertical-align:top;" /></td>
</tr>
</table>

【参考サイト】

• 一撃デザインの種明かし（12）：誰でも作れる！ “崩れない”HTMLメルマガ作成術 (1/4) – ＠IT