コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML を使用して簡単なメール テンプレートを作成_HTML/Xhtml_Web ページの作成

HTML を使用して簡単なメール テンプレートを作成_HTML/Xhtml_Web ページの作成

WBOY
リリース： 2016-05-16 16:36:25
オリジナル
2211 人が閲覧しました

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

私は JavaScript Weekly など、多くのニュースレターを購読しています。その週の重要なニュースを毎週メールで受け取ります。
2015712153636746.jpg (349×460)

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

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

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

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

1.Doctype

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  3. <html xmlns="http: //www.w3.org/1999/xhtml">
  5. <頭>
  7. <メタ http-equiv=" Content-Type" content="text/html" />
  9. <タイトル>HTML メール作成ガイドタイトル>
  11. <メタ name="ビューポート" コンテンツ="width=デバイス幅、初期スケール=1.0"/>
  13. 頭>
  15. html>

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

2.レイアウト

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ボディ スタイル="margin: 0; padding : 0;">
  3. <テーブル ボーダー="1" セルパディング="0" セルスペース="0" 幅="100%">
  5. <tr>
  6. <td> こんにちは！ td>
  7. tr>
  9. テーブル>
  11. ボディ>

テーブルのボーダー属性は 1 ですが、これは便宜上配布されるためです。正式に配布されるときは、この属性は 0 に設定されます。

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

XML/HTML コード复制コンテンツ到剪贴板
  1. <テーブル 整列="中心" ボーダー="1" セルパディング="0" セル間隔="0" 幅 ="600"スタイル="border-collapse: collapse;" >
  3. <tr>
  4. <td> 行 1 td>
  5. tr>
  7. <tr>
  8. <td> 行 2 td>
  9. tr>
  11. <tr>
  12. <td> 行 3 td>
  13. tr>
  15. テーブル>

コンポーネントの内容には一部の部分があり、行（行）を設定します。

3. 图片

画像は唯一参照できる外部ソースです。その他の外部ソース、例えば形式の表ファイル、文字ファイル、ビデオファイルなどは、一切参照できません。

一部のクライアントは、画像に追加されたエッジを削除する必要があります。

CSS コード剪定板への复制コンテンツ
  1. img {概要:なし; テキスト装飾:なし; -ms-interpolation-mode: bicubic;}
  3. a img {border:none;}
  5. border="0" style="display:block ;">  

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

4. インラインスタイル

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. スタイル="フォント: 8px/14px Arial、サンセリフ;"

表現したい場合

XML/HTML コードコンテンツをクリップボードにコピー
  1. <p "マージン: 1em 0;"> 次のように記述する必要があります:

XML/HTML コード

コンテンツをクリップボードにコピー

<
p
  1. スタイル="margin-top: 1em ; マージン下: 1em; マージン左: 0;"> 5. W3C チェックサム テスト ツール
    2. 一部のクライアントは修飾されていない属性を削除するため、最終コードが W3C 検証に合格できることを確認する必要があります。また、テスト ツール (
1
、
2

、3) を使用して、さまざまなクライアントでの表示結果を表示します。

HTML メールを送信する場合、MIME タイプは使用できないことに注意してください XML/HTML コード

コンテンツをクリップボードにコピー

コンテンツタイプ: text/plain
  1. 代わりに を使用してください
XML/HTML コード

コンテンツをクリップボードにコピー

コンテンツ タイプ: マルチパート/代替
  1. 送信ツールについては、 MailChimp および Campaign Monitor
    2. の使用を検討してください。
6. テンプレート

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

HTML 電子メール ボイラープレート

および 電子メール学 を参照してください。

関連ラベル：
html 郵便
ソース：php.cn
前の記事：HTMLとXHTML、HTML4とHTML5のタグの違いの紹介_HTML/Xhtml_Webページ制作 次の記事：HTMLのスタイルタグと関連CSSリファレンスの詳しい解説_HTML/Xhtml_Webページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート