ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML を使用して簡単なメール テンプレートを作成_HTML/Xhtml_Web ページの作成
HTML を使用して簡単なメール テンプレートを作成_HTML/Xhtml_Web ページの作成
- WBOYオリジナル
- 2016-05-16 16:36:252211ブラウズ
今日は「ローテク」の質問について書きたいと思います。
私は JavaScript Weekly など、多くのニュースレターを購読しています。その週の重要なニュースを毎週メールで受け取ります。 
ある日、私もこんなメールを作ってもいいだろうかと考えました。
そして、それはそれほど簡単ではないことがわかりました。背景や編集作業はさておき、メール テンプレートをデザインするだけでも多くの考慮が必要です。 
この形式の電子メールは実際には Web ページであるため、その正式名称は HTML 電子メールです。正しく表示されるかどうかはメールクライアントに依存します。ほとんどの電子メール クライアント (Outlook や Gmail など) は HTML 設定をフィルタリングして、電子メールを認識できなくします。
HTMLメールを書くコツは、15年前のWebページ作成方法を使うことだと分かりました。以下は私がまとめたライティングガイドです。
1.Doctype
現在、最も互換性のある Doctype は XHTML 1.0 Strict です。実際、Gmail と Hotmail は Doctype を削除し、この Doctype に置き換えます。
- >
- <html xmlns="http: //www.w3.org/1999/xhtml">
- <頭>
- <メタ http-equiv=" Content-Type" content="text/html" />
- <タイトル>HTML メール作成ガイドタイトル>
- <メタ name="ビューポート" コンテンツ="width=デバイス幅、初期スケール=1.0"/>
- 頭>
- html>
この Doctype を使用すると、HTML5 構文は使用できなくなります。
2.レイアウト
Web ページのレイアウトにはテーブルを使用する必要があります。まず、背景を設定するために一番外側に大きなテーブルを配置します。
- <ボディ スタイル="margin: 0; padding : 0;">
- <テーブル ボーダー="1" セルパディング="0" セルスペース="0" 幅="100%">
- <tr>
- <td> こんにちは！ td>
- tr>
- テーブル>
- ボディ>
テーブルのボーダー属性は 1 ですが、これは便宜上配布されるためです。正式に配布されるときは、この属性は 0 に設定されます。
内側の層には、コンテンツを表示するために 2 番目のテーブルが配置されます。2 番目のテーブルの輝度は 600 ピクセルに設定されており、クライアントの表示輝度を超えないようになっています。
- <テーブル 整列="中心" ボーダー="1" セルパディング="0" セル間隔="0" 幅 ="600"スタイル="border-collapse: collapse;" >
- <tr>
- <td> 行 1 td>
- tr>
- <tr>
- <td> 行 2 td>
- tr>
- <tr>
- <td> 行 3 td>
- tr>
- テーブル>
コンポーネントの内容には一部の部分があり、行（行）を設定します。
3. 图片
画像は唯一参照できる外部ソースです。その他の外部ソース、例えば形式の表ファイル、文字ファイル、ビデオファイルなどは、一切参照できません。
一部のクライアントは、画像に追加されたエッジを削除する必要があります。
- img {概要:なし; テキスト装飾:なし; -ms-interpolation-mode: bicubic;}
- a img {border:none;}
-
border="0" style="display:block ;">
多くのクライアント (Gmail など) ではデフォルトで画像が表示されないため、画像がなくてもメインコンテンツが読めることを確認してください。
4. インラインスタイル
すべての CSS ルールにはインライン スタイルを使用するのが最善です。 Web ページの先頭に配置されたスタイルはクライアントによって削除される可能性が高いためです。 CSS ルールのクライアント サポートについては、ここを参照してください。
また、CSS の省略形は使用しないでください。一部のクライアントではサポートされていません。たとえば、次のような内容は書かないでください:
- スタイル="フォント: 8px/14px Arial、サンセリフ;"
表現したい場合
- <p "マージン: 1em 0;"> 次のように記述する必要があります:
XML/HTML コード
コンテンツをクリップボードにコピー
- スタイル="margin-top: 1em ; マージン下: 1em; マージン左: 0;"> 5. W3C チェックサム テスト ツール 一部のクライアントは修飾されていない属性を削除するため、最終コードが W3C 検証に合格できることを確認する必要があります。また、テスト ツール (
、3) を使用して、さまざまなクライアントでの表示結果を表示します。
HTML メールを送信する場合、MIME タイプは使用できないことに注意してください XML/HTML コード
コンテンツをクリップボードにコピー
- 代わりに を使用してください
コンテンツをクリップボードにコピー
- 送信ツールについては、 MailChimp および Campaign Monitor の使用を検討してください。
他の人がすでに作成したテンプレートを使用することは良い選択であり (こことここ)、オンラインでさらに見つけることができます。 自分で開発したい場合は、
HTML 電子メール ボイラープレートおよび 電子メール学 を参照してください。