通常のwebページを作る場合とは違って、タグの制限が多くて崩れやすいHTMLメール。
styleはインラインで書かなければならないし、flexboxもfloatも使えません（！）
今後のために、作り方と注意点のまとめです。
基本設定
・基本的なレイアウトはtable組みで。
・Doctypeの宣言は4.01Transitional(strictだとtableが使えない）
・文字コードはiso-2022-jp、改行コードはCRLF（楽天のメルマガはShift_JIS、改行コードはCRLF）
・styleはインラインで書く(scssで書いてgulpでinline化する)
・画像に絶対パス、border: noneは必須
注意点
・同じパスの画像は使い回しが出来ない
・背景カラーはOK、背景画像はoutlookで表示されないので使わない
・rgbaが有効じゃない環境があるので使わない(どうしても使う場合は#での指定も一緒にする）
・borderも描画されない環境があるので使わない（画像で対応）
・imgタグにmarginは効かない
・div、p、aタグにpaddingは効かない
scssで書いてinline化する
styleをinlineで書くのはとっても大変なので、
gulpを使って「scssで書いてinline化」します。
「gulp-inline-css」を「使えば、いつも通りscssで書いても大丈夫！
最終的にはinlineスタイルで書き出すことが出来ます。
「gulp-inline-css」はこちらから。
https://www.npmjs.com/package/gulp-inline-css
こちらの記事が参考になりました。ありがとうございます！
https://qiita.com/k-takam/items/1a58551868a453631bb9
Outlookだけに対応させたい場合
Outlookでは、max-widthが使えないので、
幅を固定してあげる必要があります。
ただし、スマホで崩れずに表示させるためには
widthは100%、max-widthで最大幅を決めてあげたいですよね。
そんな時は条件付きコメントで対応させます。
例えばこんな感じで、
<!--[if gte mso 9]>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<![endif]-->
gteは以上の意味で、「msoバージョン9以上に対応させる」となります。
gteの他に、lteは以下、ltは未満で条件を変更出来ます。
その他のバージョン-----------
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
各メーラーでチェックする
各メーラーのチェックには「litmus」が便利。
https://litmus.com/pricing(有料）
確認用のデバイスがあれば、無料でメールを送ることも出来ます。
https://putsmail.com/history(無料）
Outlookはwordのレンダリングエンジンを使用していることから、
wordで確認することも出来ます。
https://support.microsoft.com/ja-jp/help/933793/outlook-2010-and-outlook-2007-use-only-word-as-the-email-editor
ただ、tableのborderがcssで制御出来なかったりしたので、
テスト確認位にしか使えなそうです。。
必ずメーラーでのチェックをしましょう！
その他注意したいこと
各メーラーで表示されない場合に備えて、ブラウザ表示用のリンクを貼ると親切です。
ブラウザ表示用に、metaタグも必ず入れておきます。
ただし、楽天のメルマガではbody直下しか書けない、などの規約があるので
メルマガの規定を必ず確認すること！
おわり。