HTMLメールで枠付きのボタンを作る

前回と同じく、PCとスマホ共通サイズのボタンになります。
今回は赤枠、白地、赤いテキストのボタンを作成します。

<!-- ボタン -->
<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">
<tr>
<td width="300" height="50" align="center"><table border="0" cellpadding="0" cellspacing="0" style="border:2px solid #e60012;border-radius:5px;">
<tr>
<td width="296" height="46" align="center"><a href="#" target="_blank" style="display:block;padding:0;color:#e60012;font-size:16px;font-weight:bold;line-height:46px;text-decoration:none;">リンクテキストは全角１６文字まで</a></td>
</tr>
</table></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 border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="50" align="center">

ボタン本体の<table>タグには特に何も指定しません。
<td>タグにボタンの幅と高さを指定します。

<table border="0" cellpadding="0" cellspacing="0" style="border:2px solid #e60012;border-radius:5px;">

さらに<table>タグを追加して、ボタンの枠をCSSで指定し、角丸になるようにしています。
※角丸のCSSはOutlookなどでは効かず、四角いボタンになります。

<td width="296" height="46" align="center">

<td>タグに枠の太さだけ幅と高さを引いて指定します。

<a href="#" target="_blank" style="display:block;padding:0;color:#e60012;font-size:16px;font-weight:bold;line-height:46px;text-decoration:none;">

<a>タグのline-heightも枠の太さだけ高さを引いてます。
color:#e60012; で文字の色を赤に指定しています。