HTMLメールで区切り線を作成する

<!-- 区切り線 左右余白なし -->
<tr>
<td style="font-size:0;border-bottom:1px solid #cccccc;" height="40"></td>
</tr>
<tr>
<td style="font-size:0;" height="40"></td>
</tr>

少し前まではCSSが効かないメーラーが多かったですが、現在はCSSでもborderは効くメーラーがほとんどです。
そのため高さのスペーサーにCSSを設定して区切り線を作成しています。
上下どちらかの余白に border-bottom または border-top を設定してください。
今回は上の余白に対して border-bottom:1px solid #cccccc; を設定しています。
font-size:0; は行間を調整するために入れておいてください。

また、下記は左右に余白を設定した場合の書き方です。

<!-- 区切り線 左右余白あり -->
<tr>
<td width="20" style="font-size:0;" rowspan="2"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560" style="font-size:0;border-bottom:1px solid #cccccc;" height="40"></td>
</td>
<td width="20" style="font-size:0;" rowspan="2"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" height="40"></td>
</tr>

区切り線の色や余白の高さは適宜変更してください。

この記事が気に入ったらサポートをしてみませんか?