HTMLを使った簡単なメールテンプレートの作成

今日は、「ローテク」な質問を書きたいと思います。

　　とはいえ、私は、以下のようなメルマガをたくさん購読しています。 週刊JavaScript . 毎週メールが届くので、今週は何があるのかがわかります。

　先日、「こんなメールはどうだろう？

　　すると、そう簡単なことではないことが分かってきました。バックエンドや編集の作業はともかく、サンプルメールのデザインだけでも相当な思考が必要です。
画像

このような書式付きメールは、実際にはWebページであり、正式にはHTMLメールと呼ばれるため、正しく表示されるかどうかは、すべてメールクライアントに依存します。ほとんどのメールクライアント（OutlookやGmailなど）は、HTMLの設定をフィルタリングして、メールの見栄えを悪くしてしまうのです。

　　HTMLメールを書くコツは、15年前のウェブページの作成方法を使うことだとわかりました。以下は、その書き方についてまとめたガイドです。

　　1. ドクタイプ

　　現在、互換性のために最適なDoctypeはXHTML 1.0 Strictです。実際、GmailとHotmailはあなたのDoctypeを削除して、このDoctypeに置き換えます。

　　このDoctypeを使用することは、HTML5の構文が使えないということでもあります。

　　2. レイアウト

　　Webページのレイアウト（レイアウト）には、必ずテーブルを使用します。まず、背景を設定するために一番外側の大きなテーブルを配置する。

　　テーブルのborder属性は、開発を容易にするため、1になっています。正式公開時には、この属性を0に設定してください。

　　内側の階層に、2つ目のテーブルを配置します。これは、コンテンツを表示するために使用されます。クライアントの表示幅を超えないように、2つ目のテーブルの幅は600ピクセルに設定します。

　　メール内容のパーツがいくつあるか、数行（行）を設定します。

　　3.画像

　　画像は、参照できる唯一の外部リソースです。スタイルシートファイル、フォントファイル、動画ファイルなど、他の外部リソースは一切参照できません。

　　画像リンクにボーダーを付けているクライアントがありますが、ボーダーを削除してください。

　　なお、デフォルトで画像を表示しないクライアントも多いので（Gmailなど）、画像なしでもメインコンテンツが読めるようにしましょう。

　4. インラインスタイル

　　すべてのCSSルールにおいて、インラインスタイルを使用することが最善です。これは、ページの先頭に置かれたスタイルがクライアントによって削除される可能性が高いためである。CSSルールのクライアント側でのサポートについては、こちらを参照してください。

　　また、クライアントによってはサポートしていないCSSの短縮形は使用しないようにしましょう。例えば、以下のような書き方はしないようにしましょう。

　　を表現したい場合

　　以下のように表記すること。

　　5. W3C検証・テストツール

　　クライアントによっては、不適合な属性が削除されることがあるので、最終的なコードがW3Cの検証に合格していることを確認することが重要です。また、テスト・ツール ( 1 , 2 , 3 ) をクリックすると、異なるクライアントで表示された結果を確認できます。

　　HTMLメールを送信する場合、MIMEタイプは使用できないことをお忘れなく

　　また、使用するには

　　送信ツールは、以下を使用して検討することができます。 メールチンプ と キャンペーンモニター .

　　6.テンプレート

　　他の人が既に作っているテンプレート（こことここ）を使うのも良い方法ですし、もっと多くのテンプレートがネット上で見つかります。

　　自分で開発する場合は、以下を参考にするとよいでしょう。 HTMLメールボイラープレート と 電子メール学 .