Edited at

HTMLメルマガを書いてみる

More than 1 year has passed since last update.

こんにちは、そして初めまして。色々と乱雑に勉強中の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">

[追記]

iso-2022-jpに対応してるエディタがあんまり無さげなので、UTF-8で編集しておいて、後からコピペする際にiso-2022-jpにする、といった手段の方が良いと思います。[追記ここまで]


レイアウト

Webだとかなり自由にレイアウトできるのですが、HTMLメールは<table></table>を使ってレイアウトします。いわゆるテーブルレイアウト。マジかよ…


style

外部CSSは当然ながら、head内の<style>~</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>