ホームページ > 記事 > ウェブフロントエンド > HTML で簡単な電子メールテンプレートを作成する

HTML で簡単な電子メールテンプレートを作成する

高洛峰オリジナル: 2017-02-27 11:04:382160ブラウズ

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

ちなみに、私はJavaScript Weeklyなど、たくさんのニュースレター（ニュースレター）を購読しています。その週の重要なニュースを毎週メールで受け取ります。
HTML で簡単な電子メールテンプレートを作成する

ある日、私もこんなメールをしてもいいだろうかと考えました。

その後、それはそれほど簡単ではないことがわかりました。背景や編集作業はさておき、メールテンプレートをデザインするだけでも多くの考慮が必要です。
HTML で簡単な電子メールテンプレートを作成する

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

HTMLメールを書くコツは、15年前のWebページ作成方法を使うことだと分かりました。以下は私がまとめたライティングガイドです。

1. Doctype

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

　　<title>HTML Email编写指南</title>

　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

　</head>

</html>

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

2. レイアウト

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

<body style="margin: 0; padding: 0;">

　<table border="1" cellpadding="0" cellspacing="0" width="100%">

　　<tr>
　　　<td> Hello! </td>
　　</tr>

　</table>

</body>

開発の都合上、テーブルのborder属性は1となります。正式にリリースされたら、この属性を 0 に設定します。

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

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">

　<tr>
　　<td> Row 1 </td>
　</tr>

　<tr>
　　<td> Row 2 </td>
　</tr>

　<tr>
　　<td> Row 3 </td>
　</tr>

</table>

メールの内容はいくつかの部分に分かれており、数行設定するだけです。

3.写真

引用できる外部リソースは写真のみです。その他、スタイルシートファイル、フォントファイル、動画ファイル等の外部リソースを引用することはできません。

一部のクライアントは画像リンクに枠線を追加するため、枠線を削除する必要があります。

　　img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}   

　　a img {border:none;}   

　　<img  border="0"   style="max-width:90%" alt="HTML で簡単な電子メール テンプレートを作成する" >

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

4. インラインスタイル

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

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

style="font: 8px/14px Arial, sans-serif;"

<p style="margin: 1em 0;">

を表現したい場合は、次のように記述してください:

<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">

5. W3C チェックサムテストツール

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

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

Content-Type: text/plain;

しかし、

Content-Type: Multipart/Alternative;

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

6. テンプレート

他の人がすでに作成したテンプレート (こことここ) を使用することは良い選択であり、オンラインでさらに見つけることができます。

自分で開発する場合は、HTML Email Boilerplate と Emailology を参照してください。

HTML での簡単な電子メールテンプレートの作成に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML での Li タグの使用次の記事：HTML での Li タグの使用

続きを見る

HTML で簡単な電子メール テンプレートを作成する

関連記事

HTML で簡単な電子メールテンプレートを作成する