こんにちは、そして初めまして。色々と乱雑に勉強中のycrackといいます。
HTMLの勉強を始めてしばらく経ったので、HTMLメールを書いてみようと思ったら、WebのHTMLと全然違ってこれまた大変だったので、備忘録がてら書いておきます。
DOCTYPE
今のWebのスタンダードといえばHTML5+CSS3な感がありますが、先進的なのはブラウザだけでメーラーはかなり対応がまちまちです。なので、安全策も兼ねて以下の2つが良さそうです。どちらにするかはお好みで。
- HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">hogefuga</html>
- XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">hogefuga</html>
文字コード
HTML5だと簡単にこのように書きますが、
<meta charset="UTF-8">
HTML4.01かXHTML1.0を使うので、http-equivを使って書きます。EメールなのでUTF-8ではなくiso-2022-jpが良さそうです。
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
追記 [2017-07-29 17:48 JST]
iso-2022-jpに対応してるエディタがあんまり無さげなので、UTF-8で編集しておいて、後からコピペする際にiso-2022-jpにする、といった手段の方が良いと思います。
レイアウト
Webだとかなり自由にレイアウトできるのですが、HTMLメールは<table>を使ってレイアウトします。いわゆるテーブルレイアウト。マジかよ…
style
外部CSSは当然ながら、<head>内の<style>すら読んでくれないケースがあるので、全部タグの属性に書きます。おのれGmail。
<table style="border-collapse: collapse; padding: 0; border: 0; width: 640px;">
<tr>
<td>hoge</td>
<td>fuga</td>
</tr>
</table>
その他気になったこと
何故か<img>を入れるとpaddingを0指定にしていても1px追加されてしまう問題が発生。気に食わないけど、cellpadding="0"とすることで解決。
<table style="border:0; padding:0;" cellpadding="0">
<tbody>
<tr>
<td>
<img src="hoge.png">
</td>
</tr>
</tbody>
</table>