HTMLを使用してメールテンプレートを作成する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

php中世界最好的语言

Jan 25, 2018 am 11:23 AM

htmlどうやって書く

今回は、HTML を使用してメールテンプレートを作成する方法と、HTML を使用してメールテンプレートを作成する際の注意事項について説明します。実際のケースを見てみましょう。

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

ところで、私はJavaScript Weeklyなど、たくさんのニュースレター（ニュースレター）を購読しています。その週の重要なニュースを毎週メールで受け取ります。

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

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

このフォーマットされたメールは実際には 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. テンプレート

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTML コードを記述するための標準とは何ですか?

HTML と CSS を使用してわかりやすくする方法

XHTML でよく使用されるタグとは何ですか?

以上がHTMLを使用してメールテンプレートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles