HTMLを使用してシンプルなメールテンプレートを作成する

HTMLを使用してシンプルなメールテンプレートを作成する

今日は、「ローテク」の問題について書きたいと思います。

ちなみに、私は JavaScript Weekly など、いくつかのニュースレターを購読しています。毎週、その週の大きなニュースをメールで受け取ります。
2015712153636746.jpg (349×460)

ある日、私もこんなメールを作れるかな?と考えました。

すると、それはそんなに簡単なことではないと気づきました。バックエンドと編集作業は別として、電子メール テンプレートを設計するだけでも多くの考慮が必要です。
2015712153840405.jpg (550×671)

このフォーマットされた電子メールは実際には Web ページであるため、正式名称は HTML 電子メールです。正しく表示できるかどうかは、電子メールクライアントによって完全に異なります。ほとんどの電子メール クライアント (Outlook や Gmail など) は HTML 設定をフィルター処理するため、電子メールが認識できなくなります。

HTML メールを書くコツは、15 年前に Web ページを作成するときに使用されたのと同じ方法を使用することだということが分かりました。私がまとめた執筆ガイドはこちらです。

1. ドキュメントタイプ

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2.   
  3. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  4.   
  5.  <ヘッド>   
  6.   
  7.   <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = UTF-8"   />   
  8.   
  9.   < title > HTML メール作成ガイド</ title >   
  10.   
  11.   <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1.0" />   
  12.   
  13.  </ヘッド>   
  14.   
  15. </html>   

この Doctype を使用すると、HTML5 構文は使用できなくなります。

2. レイアウト

Web ページのレイアウトにはテーブルを使用する必要があります。まずは背景となる大きな外側のテーブルを配置します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文 スタイル= "マージン: 0; パディング: 0;" >   
  2.   
  3.  < 境界線= "1"  セルパディング= "0"  セル間隔= "0"  = "100%" >   
  4.   
  5.   < tr >   
  6.    < td >こんにちは! </ td >   
  7.   </tr>   
  8.   
  9.  </>   
  10.   
  11. </本文>   

テーブルの border プロパティは 1 に設定されており、これは開発の便宜上のためです。正式にリリースされたら、このプロパティを 0 に設定します。

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <  align = "中央"  境界線= "1"  セルパディング= "0"  セル間隔= "0"  = "600"  スタイル= "border-collapse: collapse;" >   
  2.   
  3.  < tr >   
  4.   < td >行 1 </ td >   
  5.  </tr>   
  6.   
  7.  < tr >   
  8.   < td > 2行目</ td >   
  9.  </tr>   
  10.   
  11.  < tr >   
  12.   < td > 3行目</ td >   
  13.  </tr>   
  14.   
  15. </>   

メールの内容と同じ数の行を設定します。

3. 画像

引用できる外部リソースは画像のみです。スタイルシート ファイル、フォント ファイル、ビデオ ファイルなどのその他の外部リソースは一切参照できません。

一部のクライアントは画像リンクに境界線を追加するので、それを削除する必要があります。

CSSコードコンテンツをクリップボードにコピー
  1. img {アウトライン:なし;テキスト装飾:なし; -ms-補間モード:バイキュービック;}
  2.   
  3. 画像 {境界線:なし;}
  4.   
  5. <img border = "0" style = "display:block;" >

多くのクライアントではデフォルトで画像が表示されないため(Gmail など)、画像がなくてもメインコンテンツが読めることを確認してください。

4. インラインスタイル

すべての CSS ルールはインラインで使用するのが最適です。 Web ページのヘッダーに配置されたスタイルは、クライアントによって削除される可能性があるからです。 CSS ルールのクライアント サポートについては、こちらをご覧ください。

また、一部のクライアントでは CSS の省略形がサポートされていないため、使用しないでください。たとえば、次のように書く代わりに、

XML/HTML コードコンテンツをクリップボードにコピー
  1. style = "フォント: 8px/14px Arial、サンセリフ;"   

表現したいなら

XML/HTML コードコンテンツをクリップボードにコピー
  1.  < 10 ...  スタイル= "マージン: 1em 0;" >   

次のように書きます:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < 10 ...  スタイル= "上マージン: 1em; 下マージン: 1em; 左マージン: 0; 右マージン: 0;" >   

5. W3C 検証およびテストツール

一部のクライアントは非修飾属性を削除するため、最終的なコードが W3C チェックに合格することを保証します。また、テスト ツール (1、2、3) を使用して、さまざまなクライアントでの表示結果を確認します。

HTMLメールを送信する場合、MIMEタイプは使用できないことに注意してください。

XML/HTML コードコンテンツをクリップボードにコピー
  1. コンテンツタイプ: text/plain;

代わりに、

XML/HTML コードコンテンツをクリップボードにコピー
  1. コンテンツタイプ: Multipart/Alternative;

送信ツールとしては、MailChimp と Campaign Monitor の使用を検討してください。

6. テンプレート

他の人がすでに作成したテンプレート (こちらとこちら) を使用することをお勧めします。インターネット上でさらに多くのテンプレートを見つけることができます。

独自のものを開発したい場合は、「HTML Email Boilerplate」と「Emailology」を参照してください。

<<:  TypeScript のユニオン型、交差型、型ガード

>>:  CentOS 8.4 に Docker をインストールする詳細なチュートリアル

推薦する

MYSQL での Truncate の使用法の詳細な説明

この記事のガイド: テーブル内のデータを削除するには、削除と切り捨ての 2 つの方法があります。TR...

img usemap 属性 中国地図リンク

HTML img タグ: Web ページに導入される画像を定義します。興味深い usemap 属性も...

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....

td セルを結合した場合の td 幅の問題

以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...

Linux での Makefile の書き方と使い方の詳細な説明

目次メイクファイルMakefile の命名とルールMakefile の仕組みMakefile変数Ma...

Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?

目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...

MacでのMySQL初期化パスワード操作

Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...

デザイン理論: テキストの読みやすさと可読性

<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...

初めてDockerイメージを構築、実行、公開、取得するための詳細な手順

1. はじめに以前は、Python アプリケーションの作成を開始したい場合、最初のステップはマシンに...

inline-blockプロパティとの互換性

<br />1年前、インターネット上にはinline-blockプロパティに関する記事は...

MySQLデータの重複チェックと重複排除の実装ステートメント

テーブル user があり、フィールドは id、nick_name、password、email、p...

Kylin 4.0.2 (Ubuntu) でブート パーティションを拡張するプロセスの紹介

目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...

MySQL での or ステートメントの使用例

1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...

Nginx ルーティング転送とリバースプロキシロケーション構成の実装

Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...