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