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 をインストールする詳細なチュートリアル

推薦する

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

Vue 監視プロパティと計算プロパティ

目次1. 監視プロパティを監視する1. ショッピングカート2. すべて選択し、すべて選択解除する2....

Zabbixについて管理者ログインパスワードを忘れた場合、パスワードをリセットする

Zabbix 管理者ログイン パスワードのリセットに関する問題は次のとおりです。 1. 問題の説明:...

MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します

mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...

MySQL バックアップ スクリプトの書き方

序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

HTML での Li タグの使用例

タイトルを左に、日付を右に揃えたいのですが、日付の範囲に float:right を直接追加すると、...

Navicat による MySQL パーティショニングの実践

MySQLのパーティショニングは、非常に大きなテーブルを管理するのに役立ちます。MySQLのパーティ...

Vue ポーリング リクエスト ソリューションの完全な例

世論調査の理解実際、ポーリングの焦点はループ自体ではなく、実行間の間隔にあります。 Ajax は非同...

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...

MySQL における INSERT INTO SET の利点

MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...

デカルト積原理を使用してMySQLで複数のテーブルをクエリする方法を簡単に説明します。

MySQL マルチテーブルクエリ (直積原理)まず、データが使用するテーブルを決定します。デカルト...

CSS3のall属性の使い方を理解する

1. 互換性以下のように表示されます。 互換性は問題ありません。IE を除き、他のブラウザは基本的に...

CSS の記述基準と順序を共有する [すべての人に使用を推奨]

CSSの記述順序1. 位置属性(位置、上、右、z-index、表示、フロートなど) 2. サイズ(...

Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順

Docker コンテナ内のプログラムは、ホスト ディレクトリ内のデータにアクセスして呼び出す必要があ...