Edited at

PCでもスマホでも崩れないHTMLメールの作り方

More than 1 year has passed since last update.

通常の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で最大幅を決めてあげたいですよね。

そんな時は条件付きコメントで対応させます。

例えばこんな感じで、


html

<!--[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直下しか書けない、などの規約があるので

メルマガの規定を必ず確認すること!

おわり。