Posted at
AtraeDay 4

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

More than 3 years have passed since last update.


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



  • <table>タグを組むときにcolspanrowspanを使わないように組み立てる

  • 半角スペースは極力削る(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に指定すれば、内側のtabletdに、書かなくて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>


  • 文字の色や文字の太さを変更する時はfontbタグで書く(もちろんインラインでスタイルも書く)


  • 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>タグを組むときにcolspanrowspanを使わないように組み立てる

これが結構大事で、崩れないようにするにはここを徹底するべき。

横幅に余白を取りたい場合はテーブルを二重にする等の工夫をする。

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

メール1.png

<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を書いていきます。

メール2.png

<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の数を、基本的に同じ数で書いていけば間違いないです。


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