HTMLメールでテキストボタンを作る

PCとスマホ共通サイズのボタンを作成する方法です。
スマホの最小幅320pxに合わせて、横幅300pxのボタンを作成します。

<!-- ボタン -->
<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:5px;">
<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>

ここから一つずつ説明していきます。

<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>

左右の余白はPCでは20px、スマホでは10pxになるようにしています。

<td width="560" align="center">

真ん中の<td>タグに align="center" ボタンを真ん中に設置するため、alignで位置を指定しています。

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

ボタン本体の<table>タグに、ボタンの色をbgcolorで指定し、CSSで角丸になるようにしています。
ただし、OutlookなどではCSSが効かず、角丸ではなく四角いボタンになります。

<td width="300" height="50" align="center">

<td>タグにボタンの幅と高さを指定します。

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

<a>タグ全体をクリックできるように display:block; でブロック要素にし、高さを固定しています。
line-height:50px; で行間をボタンの高さと同じにすることで、テキストを高さの真ん中に表示するようにしています。
text-decoration:none; でテキストリンクの下線を消しています。任意で設定してください。