Outlookに勝てるHTMLメールコーディング vol.1「table構成編」

15161 ワード
mail cording HTML Outlook CSS HTML テキストリンク

メールコーディングをする上で重要なポイント

  • <table>タグを組むときにcolspanやrowspanを使わないように組み立てる
  • 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い)
  • 画像のパス指定は 'http://' から記述
  • スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する

Outlook対策

  • 画像のサイズは必ずwidth="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。)

今回の記事で実機確認しているのは、以下の通り。

  • Mac
    • Mail
    • Gmail(Chrome/FF)
    • Inbox(Chrome/FF)
    • Thunderbird
  • Windows
    • Outlook
  • iPhone
    • Mail
    • Gmail
    • Inbox
    • MailBox
  • Android
    • Gmail

head設定

  • ドキュメント宣言は 'HTML 4.01 Transitional' で設定
  • 文字コードは 'iso-2022-jp' で設定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Type" content="text/html;charset=iso-2022-jp" />
    <meta name="viewport" content="initial-scale=1.0,width=device-width" />
    <title>[タイトル]</title>
  </head>
  <body>
    [本文]
  </body>
</html>

CSS

  • CSSはメーラーによって影響範囲が変動するため、良く理解した上でコーディングしていく必要がある。
  • 対応するデバイスは決めておく必要がある。
  • 主要メーラーとして気にするべきなのはGmailとOutlook
    • Browser/Gmail => 一部のCSSは効かない(リンクの色を指定しても勝手に抜かれるなど、頑張っても無理な場所があります。)
    • Win/Outlook => CSSファイルを読み込まない為、基本的にレスポンシブは考えない。崩れないで表示するためにはどうするか？という程度に考える。

詳しいデバイス別の対応表はこちらから
The Ultimate Guide to CSS

body内のタグの書き方

  • 基本的にタグにプロパティを足す＋スタイルはインラインで書く。
  • resetされたboxの書きかた(Outlookに対応)
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%;border:none;margin:0;">
  <tr>
    <td width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%;border:none;margin:0;">
    </td>
  </tr>
</table>
  • 背景色を付けたい場合は、一番外のtableに指定すれば、内側のtableやtdに、書かなくてOK。
  • 高さを取りたい時は必ずtdで書くこと
<table width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" style="width:100%; background:#fff;border:none;margin:0;">
  <tr>
    <td width="100%" height="14" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:14px;background:#fff;border:none;margin:0;">
      [白背景の height:14px のボックス]
    </td>
  </tr>
</table>
  • 文字の色や文字の太さを変更する時はfontやbタグで書く(もちろんインラインでスタイルも書く)
  • font-sizeの1~5は大体以下くらいのサイズを目処にかけばOK(CSS非対応デバイス対策)
    • size="1" (12px)
    • size="2" (14px)
    • size="3" (16px)
    • size="4" (18px)
    • size="5" (20px)
<font color="#414141" size="3" style="font-size:16px;color:#414141;">
  <b style="font-weight:bold;">
    <img src="/images/new.png" width="26" height="20" border="0" style="width:26px;height:20px;border:none;" />
    新着のメッセージが有ります！
  </b>
</font>

tableの組み方

  • 序盤で話したように<table>タグを組むときにcolspanやrowspanを使わないように組み立てる

これが結構大事で、崩れないようにするにはここを徹底するべき。
横幅に余白を取りたい場合はテーブルを二重にする等の工夫をする。

以下のようなメールを作りたい場合、まず、大枠となるtableを1つ作り、横の余白を設定します。

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%;border:none;margin:0;">
  <tr>
    <td width="15" border="0" cellpadding="0" cellspacing="0" style="width:15px;border:none;margin:0;">
    </td>
    <td width="*" border="0" cellpadding="0" cellspacing="0" style="width:auto;border:none;margin:0;">
    </td>
    <td width="15" border="0" cellpadding="0" cellspacing="0" style="width:15px;border:none;margin:0;">
    </td>
  </tr>
</table>

こんな感じで15pxの横幅を作ったtableを生成し、2つ目のtdの中にまたtableを書いていきます。

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%;border:none;margin:0;">
  <tr>
    <td width="100%" height="15" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:15px;border:none;margin:0;"><!-- 余白 --></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#ccc" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#ccc;border:none;margin:0;"><!-- ① -->
    </td>
  </tr>
  <tr>
    <td width="100%" height="45" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:45px;border:none;margin:0;"><!-- 余白 --></td>
  </tr>
  <tr>
    <td width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%;border:none;margin:0;"><!-- ② -->
    </td>
  </tr>
  <tr>
    <td width="100%" height="45" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:45px;border:none;margin:0;"><!-- 余白 --></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#ccc" border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#ccc;border:none;margin:0;"><!-- ③ -->

      <table>
        <tr>
          <td>右カラム用td</td>
          <td>左カラム用td</td>
        </tr>
      </table>

    </td>
  </tr>
  <tr>
    <td width="100%" height="15" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:15px;border:none;margin:0;"><!-- 余白 --></td>
  </tr>
</table>

結構細かく輪切りにしていくことを心がけると、大きくセルが崩れたりしません。

  • 1つのtable内ではtable > tr> tdの数を、基本的に同じ数で書いていけば間違いないです。

次回はレスポンシブ対応の方法を記載していきます！