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. テンプレート
他の人がすでに作成したテンプレート (こことここ) を使用することは良い選択であり、オンラインでさらに見つけることができます。
自分で開発する場合は、HTML Email Boilerplate と Emailology を参照してください。
HTML での簡単な電子メール テンプレートの作成に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7554
15
1382
52
83
11
24
96
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
