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


## メールコーディングをする上で重要なポイント
* ` <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'__ で設定

``` html
<!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](https://www.campaignmonitor.com/css/)

## body内のタグの書き方

* 基本的にタグにプロパティを足す＋スタイルはインラインで書く。
* resetされたboxの書きかた(Outlookに対応)


``` html
<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`で書くこと

``` html
<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)

``` html
<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つ作り、横の余白を設定します。

![メール１.png](https://qiita-image-store.s3.amazonaws.com/0/19094/7b292129-9787-fbbe-2b63-26e4a8909578.png "メール１.png")

``` html
<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](https://qiita-image-store.s3.amazonaws.com/0/19094/94a4a3bd-ebdc-6773-082d-c5bb88c05e3c.png "メール2.png")

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

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