HTMLメールニュースレターと電子メールテンプレートをコーディングする方法

この記事は2006年に最初に公開され、2015年に更新されました。

HTMLメールニュースレターは、この記事が2006年に最初に公開されてから長い道のりを歩んできました。HTMLメールは、出版社と読者の両方にとって非常に成功したコミュニケーション媒体です。出版社は、電子メールの開き、フォワード、クリックスルーの料金を追跡し、製品やトピックに対する読者の関心を測定できます。読者には、より視覚的に魅力的で、スキャンしてナビゲートするのがプレーンテキストのメールよりもはるかに簡単な方法で、ウェブページのようにレイアウトされた情報が表示されます。

HTML電子メールのコーディングは、プログラマーが解決するための楽しく実用的な問題です。 Webページのコーディングとは異なり、HTMLメールは古いメールソフトウェアによく表示する必要があります。ThinkOutlookまたはMacメール、および電話やタブレットの画面に適応する必要があります。あらゆるデバイスによく表示されるHTMLメールを作成する方法に加えて、現在のHTML電子メールコードを携帯電話やタブレットに表示するためのアイデアを紹介します。

キーテイクアウト

テーブルは、コンテンツの位置付けと構造化のためにCSSよりも一貫してサポートされているため、さまざまな電子メールクライアント間の互換性を確保するために、電子メールニュースレターのレイアウトデザインにHTMLテーブルを利用してください。 多くの電子メールクライアントは外部または埋め込まれたCSSスタイルシートをサポートしていないため、フォントや色などのスタイリング要素については、HTML内にインラインCSSを直接​​適用します。

モバイルファーストアプローチを備えたメールニュースレターをデザインします。メディアクエリなどのレスポンシブテクニックを使用して、電子メールクライアント全体でさまざまなレベルのサポートにもかかわらず、携帯電話やタブレットでの表示に対応します。

テストHTMLは、複数の電子メールクライアントとデバイスを広範囲に電子メールで送信して、一貫した外観と機能性を確保し、キャンペーンモニターやMailChimpなどのテスト用のツールを利用しています。

JavaScriptやフロートやポジションなどの複雑なCSSを使用しないでください。これらは、一般的な電子メールクライアントによって剥がされたり、サポートされていないことが多いため、潜在的なレイアウトの問題につながります。
• 互換性を高め、特定の要素を電子メールクライアントによってレンダリングできない場合でも、ニュースレターにアクセスできるように画像とフォントのフォールバックを含めます。
デザインをシンプルに保ち、コンテンツを明確にして、問題のレンダリングを避け、メールニュースレターの読みやすさと有効性を高めます。
html電子メールファンダメンタルズ
• Webサイトのクロスブラウザー互換性を確保することが難しいと思った場合、これはまったく新しいゲームであることに注意してください。これらの電子メールソフトウェアツールはそれぞれ、非常に異なる方法で同じ電子メールを表示できます。そして、これらのツールがHTMLメールを適切に表示している場合でも、たとえば、電子メールを読むときに読者がウィンドウをサイズする幅を説明することで、分散を説明します。 HTMLメールを手作業でコーディングするか（私の個人的な好み）、既存のテンプレートを使用するかどうかにかかわらず、HTMLメールを作成する際に留意すべき2つの基本的な概念があります：
  HTMLテーブルを使用して、設計レイアウトといくつかのプレゼンテーションを制御します。あなたはあなたのウェブページに純粋なCSSレイアウトを使用することに慣れているかもしれませんが、そのアプローチは電子メール環境では保持されません。
  1. インラインCSSを使用して、バックグラウンドカラーやフォントなど、メール内の他のプレゼンテーション要素を制御します。
  2. HTMLテーブルとインラインCSSがHTMLメール内でどのように相互作用するかを確認する最も迅速で簡単な方法は、キャンペーンモニターとMailChimpからテンプレートをダウンロードすることです。これらのテンプレートのいずれかを開くと、後で詳しく説明することに気付くでしょう。
  CSSスタイルの宣言は、ヘッドタグの間ではなく、ボディタグの下に表示されます。

  CSSの速記は使用されません：略称スタイルルールフォントを使用する代わりに、12px/16px arial、helvetica、代わりにこの速記を個々の特性（フォントファミリー、フォントサイズ、ラインハイト）に分割する必要があります。 🎜>

  スパンとDIVは特定の効果を達成するために控えめに使用されますが、HTMLテーブルはレイアウト作業の大部分を実行します。
  CSSスタイルの宣言は非常に基本的であり、CSSファイルを使用しないでください。
  私のコードHTMLメールサイトには、私がダウンロードしてフォーマットした実際のHTMLメールもありますので、他の人がどのように電子メールを作成したかを確認することができます。
  • ステップ1：レイアウトにHTMLテーブルを使用
  • そうです：テーブルが戻ってきた、大きな時間！ Web標準は、Webブラウザーで表示するためにページをコーディングする標準になっている可能性がありますが、これはWeb、Babyではありません。いくつかの電子メールソフトウェアクライアントは、CSSサポートの観点から8ボールに少し遅れています。つまり、すべての読者にニュースレターを一貫して表示したい場合は、レイアウトにテーブルを使用することに頼らなければなりません（終了の読書リストを参照してくださいメールクライアントでのCSSサポートに関するいくつかの優れたリソースに関するこの記事）。
  それで、あなたの標準に準拠したベストプラクティスとリーンマークアップスキルを脇に置いてください：私たちは手を汚そうとしています！
  HTMLメールを作成する最初のステップは、使用するレイアウトの種類を決定することです。ニュースレターの場合、単一の列と2列のレイアウトが最適に機能します。これは、大量のコンテンツが電子メールのような小さなスペースに押し込まれたときに生じる自然なカオスを制御するためです。単一の列の電子メールのデザインは、電話やタブレットにも簡単に表示できます。

  単一列のレイアウトは、通常：

  で構成されています
  1. ヘッダー、ロゴと親Webサイトからのナビゲーションリンクのいくつか（またはすべて）を含むヘッダーは、ブランドを強化し、サイト訪問者に親しみを提供します
  2. 電子メールにさらに下に表示されるストーリーへのリンクは、ストーリーとコンテンツが続く電子メールの下部にあるフッター。これには、多くの場合、トップナビゲーションと同一のリンクが含まれています。
  2列の電子メールもヘッダーとフッターを使用しています。 2列のWebページのように、通常、狭いサイド列を使用して機能とリンクをより多くの情報にリンクし、より広い列が電子メールのボディコンテンツを保持します。この記事の後半で表示されるように、電話またはタブレットによく表示する2列の電子メールレイアウトを取得するには、Code-Fuが必要です。
  プロモーションメールは同様のルールに従いますが、コンテンツとリンクの方法ではるかに少ないことが含まれています。多くの場合、1つまたは2つのメッセージが含まれており、小さな説明テキストと画像の下にあるリンクを含む1つの大きな画像を使用することもあります。

  これらの電子メールレイアウトの可能性はすべて、HTMLテーブルを使用してスペースを行と列に分割できるように簡単に作成できます。実際、HTMLテーブルを使用することは、さまざまなメールクライアントで一貫してレンダリングするレイアウトを実現する唯一の方法です。

  メールがどのように設計されていても、最も重要なコンテンツがメールの上部またはその近くに表示されることを覚えておくことが重要です。そのため、読者がメールを開いたときにすぐに表示されます。電子メールメッセージの左上は、多くの場合、人々が電子メールを開くときに最初に見える場所です。

  これは、HTMLメールの作成に使用するアプローチです。

  2列のレイアウトの場合、ヘッダー用にそれぞれ1つのテーブル、2つの中央コンテンツ列、フッターを作成します。これは、3つのテーブルです。これらのテーブルを別のコンテナテーブルに包みます。単一列のレイアウトに同じアプローチを使用しますが、コンテンツテーブルに1列に載せます。このアプローチは、電子メールの設計に複数のテーブルセルで分割された画像が含まれている場合に特に適しています。それ以外の場合は、ヘッダーのTD行を備えた単一のテーブル（Colspan = "2"で2つの列を使用する場合はcolspan = "2"）、コンテンツとフッターは、lotusノートメールソフトウェアを除いてすべてに正常に表示されるはずです。
  • テーブル内の属性とTDタグを使用して、テーブルの表示を制御します。たとえば、border = "0"、valign = "top"、align = "left"（または中央、デザインに合った場合）、cellpadding = "0"、cellspacing = "0"などを設定します。これは主に、古い電子メールクライアントが（ほとんど）許容可能な方法で電子メールを表示するのに役立ちます。
  メールのデザインにテーブルの周りに境界線が含まれていない場合でも、開発中にborder = "1"を設定するのに役立つかもしれません。およびTDタグ。テストと生産のために、それをborder = "0"に戻します。
  このアプローチは、最新の標準を使用してコーディングすることを好む純粋主義者を怒らせるかもしれませんが、この時点で唯一の実行可能なアプローチです。しかし、レイアウトにテーブルを使用しているという事実は、昔ながらの方法に完全に頼る必要があるという意味ではありません。たとえば、Lotusのノートがどれほど不十分にHTMLメールを表示しても、フォントタグを使用することに頼る必要はありません。また、Outlook 2007のHTMLレンダリングエンジンは完璧ではありませんが、基本的なHTMLテーブルは正常に表示されます。 ただし、いくつかの注意事項があります。次にテキストのスタイリングを見てみましょう。
  ステップ2：CSSスタイルを追加

  CSSのサポートは郵便クライアントでは貧弱だったと言いましたか？まあ、そうです。ただし、ネストされたテーブルレイアウトが整ったら、電子メールのスタイルにCSSを使用することができます（そしてすべきです）。注意すべきことがいくつかあります。これが私が使用する手順を示します。

  最初に、インラインスタイルを使用して、ここに示すようにすべてのスタイル情報を保存します。

  これには、テーブル、TD、P、Aなどが含まれます

  Webページを作成するときと同じように、HTMLヘッドタグでCSSスタイルの宣言を使用しないでください。代わりに、スタイル宣言をボディタグのすぐ下に配置します。ただし、Google Mailは、電子メールのスタイル宣言を探し、（役立つ）削除します。また、リンク要素を使用して外部スタイルシートを参照しないでください。Googleメール、hotmail、およびその他の電子メールソフトウェアは、これらの外部参照をスタイルシートに無視、変更、または削除します。コンテナテーブルの場合、ヘッダー、コンテンツ、フッターテーブルを収容するコンテナテーブルの場合、テーブル幅を98％に設定します。 Yahoo！メールを適切に表示するには、両側に1％のクッションが必要です。サイドガターがメールの設計に重要である場合、潜在的な問題を回避するために幅を95％または90％に設定します。もちろん、コンテナテーブル内のテーブルは100％に設定する必要があります。

  コンテンツに最も近いテーブルTDに一般的なフォントスタイル情報を入れます。はい、これは複数のTDセル内で繰り返しスタイルの宣言をもたらす可能性があります。フォントスタイルの定義を見出し（例：H1、H2）、P、またはAタグに必要な場合にのみ配置します。

  divを使用して、テーブルのTDセル内の右または左にコンテンツとリンクの小さな箱を浮かびます。 Google Mailは、CSSフロート宣言を無視しているようです（まだYahoo!とHotmailは問題なく対処します）。フロート宣言に依存するよりも、より複雑なテーブルレイアウトをコーディングする方が良い場合があります。または、電子メールを乱雑にするのは非常に簡単なので、デザイナーにフローティングコンテンツを狭いサイド列に置くように依頼してください。フロートのフレーク状のサポートは、電子メールのデザインを再加工する可能性のある1つの問題です。

  divはかろうじて有用であるように見えますが、スパンはインライン要素であるため、ほぼ毎回動作しているように見えます。場合によっては、スパンはテキストの色やサイジングだけではありません。コンテンツの上または下のテキストを配置するために使用できます。

  一部の電子メール配信サービスは、スタイルの定義を開梱して、それらをより明確にし、したがって、すべての電子メールソフトウェアでより読みやすくすることに注意してください。たとえば、CSSの速記スタイル= "マージン：10px 5px 10px 0;"前述の長いスタイルの宣言に拡張される場合があります。各電子メールをテストし、電子メールコードに何が起こるかを確認してください。最悪の場合、すべての電子メールソフトウェアでうまく機能するように見えるため、CSSの速記から始めてください。

  キャンペーンモニターとMailChimpから電子メールテンプレートをダウンロードして調査した場合、コンテナテーブルをHTMLボディタグであるかのように扱うことがわかります。キャンペーンモニターチームは、このテーブルを「Bodymposter」と呼びます。これは、フレームまたはラッパーテーブルについて考えるのに最適な方法です。 CSSの観点から、コンテナテーブルは、Google Mailのようなサービスがボディタグを無効または無視しなかった場合にHTMLボディ要素が行うことを行います。

  ステップ3：ベストプラクティスを採用

  私が提案したガイドラインを使用して有効なHTMLメールを作成したことを知っていることは、ソリューションの一部にすぎません。メールが好評を博していることを確認するために従うべきベストプラクティスがいくつかあります。

  次のステップは、さまざまなメールクライアントでHTMLメールをテストすることです。多くの場合、これにより回避策が必要な問題が識別されます

  最初のテストツールは、FirefoxおよびInternet Explorer Webブラウザーです。電子メールが両方のブラウザによくまたは完全に表示される場合、Outlook、Yahoo！、Googleメール、およびその他のサービスでメールをテストする可能性が高くなります。可能であれば、インターネットエクスプローラー6であなたのメールをテストすることをお勧めします。これにより、Outlook 2003でメールがどのようにレンダリングされるかを適切に示しているはずです（この記事の最後にあるリソースのリストを参照してください。エクスプローラー6）。最後に、iPhoneまたはiPadでメールがどのように見えるかをテストするには、Safari WebブラウザーでHTMLメールを確認してください。

  これらの2つのWebブラウザーでメールが問題に表示されたら、電子メール配信サービスを使用して、さまざまなテストメールアカウントにメールを送信します。理想的には、これにはYahoo！、Hotmail、Google Mail Servicesのアカウントが含まれる必要があります。 もちろん、使用するテストアカウントは、電子メールを受け取る人のメーリングリストのドメイン名によって決定される必要があります。たとえば、このリストにAOLサブスクライバーがいない場合、AOLメールアカウントを設定してテストするのは時間とお金の無駄です。

  このテスト段階で必要だと思った最も一般的なコードの調整を次に示します。

  時々、幅から固定幅への切り替えが必要です。これは理想的ではありませんが、読者は読み取り中に電子メールウィンドウを変更することができます。これは、幅を使用することが、複数の電子メールクライアントにレイアウト表示を適切に表示する唯一の方法である場合があります。

  電子メールデザインの列に間隔の問題がある場合、最初にHTMLテーブルのセルパディングおよびセルスペシング属性を調整します。それがうまくいかない場合は、CSSマージンとパディング属性を適用してください。 HTML間隔は、古い電子メールソフトウェアでより適切に機能します
  TDセルがIMGタグのすぐ下で閉じているときに画像変位が発生する可能性があります。これは古代のHTML問題です。 タグを（同じ線と同じ行）に置くと、IMGタグは迷惑で神秘的な1ピクセルのギャップを排除します。
  さらに、次のベストプラクティスが推奨されます
  • JavaScriptの使用は避けてください。ほとんどの電子メールソフトウェアはとにかくそれを無効にします
  画像がスライスされていくつかのHTMLテーブルセルに広がっている場合は、多くのテストアカウントを使用してメールをテストします。時々、それは見通しが見栄えが良いかもしれませんが、hotmailやその他のサービスの1つ以上のピクセルによってシフトされるかもしれません。また、画像を、背景画像の一部を表示するすべてのテーブルの行と列を含む新しいHTMLテーブルの背景画像にすることを検討してください。これは、多くの場合、画像をスライスするのと同じ効果を達成しますが、より少ないコードを使用してより良い結果を提供できます（以下を参照）。 Outlook 2007には背景画像が表示されないことに注意してください。ターゲットメールソフトウェアでメールコードを必ずテストしてください。
  • 背景画像の場合は、CSSを使用する代わりに、テーブルの背景属性を使用します。これは、他の潜在的なソリューションよりも電子メールソフトウェアを介してより一貫して機能します。
  Webサーバーに電子メール画像を保存します。できれば、Webサイトの画像（たとえば、 /画像 /電子メールと呼ばれるフォルダー）とは別のフォルダーに、それらを削除しないでください。数週間または数ヶ月後にメールを開く人もいますが、人がブックマークを使用してWebサイトに戻るのと同じように。
  • すべての画像がALT、高さ、幅の属性を使用していることを確認してください。これらの属性の値を設定すると、Googleメールの結果が改善され、読者が画像をオフにしたときにレイアウトを維持します。ただし、Outlook 2007はAlt属性を認識していないことに注意してください。
  Aタグにターゲット= "_ blank"属性を使用して、Webメールサービスで読む人がWebメールインターフェイス内にリクエストされたページが表示されないようにします。 1×1ピクセルの画像を使用して間隔を強制して正確な電子メールレイアウトを作成できますが、スパマーは1×1ピクセルの画像を使用して、電子メールが開かれたかどうかを判断することがよくあります。このプラクティスを使用すると、メールがスパムとして分類される可能性が高まります。
  • 同様に、電子メールで「折り畳みの上」の大きな画像を使用しないでください。これは別の古典的なスパマーの練習であり、あなたのメールをスパムと解釈する可能性があります。
  • 画像をオフにしてHTML電子メールが容認できるように表示されることを確認することが重要です。多くの電子メールアプリケーションは、デフォルトで画像の表示を「オフ」に設定しています。たとえば、背景画像を使用して背景色を白いフォント色の色を提供する場合、HTMLテーブルのその部分のデフォルトの背景色が白ではなく暗いことを確認してください。
  メールが画像をオフにして表示する方法をテストするとき、通常、テキストエディターを使用して、各画像のSRC属性を「XSRCX」などの文字の一意の組み合わせに置き換え、テスト後に再び元に戻します。
  HTMLメールが調整されて、テストメールアカウントによく表示されるようになったら、次のステップはチェックリストを通過することです。たとえば、以下を確認してください
  • fromアドレスは適切に表示されますか（名前として、裸のメールアドレスではありません）
  • 件名は正しいですか？
  • 連絡先情報は正しく、視覚的に明白ですか？
  • メールの一番上に「このメールを受け取ったので、このメールの登録解除手順がこのメールの下部にあります。
  」
  • あなたのメールには、読者にメールアドレスをメールアドレス帳に追加するように読者に求めるテキストが含まれていますか？
  メールの一番上にメッセージのWebバージョンへのリンクが含まれていますか？
  多くの電子メール配信サービスには、幅広い電子メールソフトウェアでHTMLの電子メールがどのように表示されるかを確認する機能が含まれます。これは、送信する前にコードの調整が必要なコードの微調整を特定するのに役立ちます。

  ステップ4：Googleメール、Lotus Notes、およびOutlook 2007のコードGoogle Mail、Lotus Notes、およびOutlook 2007は、独自のコーディングの課題を提示します。 Outlook 2007は、信じられないかもしれませんが、Outlookの以前のバージョンよりもCSSのサポートが大幅に少ない！

  Google Mailのサポートの欠如はもう少し恥ずかしいです。アプリケーションはブラウザで実行されるため、表示するメールのコンテンツを制御できないためです。その結果、Googleのエンジニアは、メールが書かれているHTMLまたはCSSの品質に関係なく、アプリケーションが適切に表示されるようにするための措置を講じる必要がありました。 その結果、Google Mailは、Web標準が原始的だった1990年代初頭のアーティファクトのように機能します。いくつかの作業が必要ですが、Googleメールページを開き、HTMLメールを実際にレンダリングするためのアプローチがどのように複雑になったかを確認することができます。 1つのことについては、Google Mailは、電子メールのどこに表示されていても、あらゆるスタイルのタグ間に含まれるCSSスタイルを削除します。 HTMLテーブル内に表示されるフォント - スタイルを使用する唯一の代替手段は、HTMLメールがどのように構造化されていても、意図したものよりも大きく表示されるという奇妙な習慣を持っています。 ただし、良いニュースは、これら3つの電子メールアプリケーションの奇妙さを説明するためにコーディングする場合、HTML電子メールコードは、すべてではないにしても、ほとんどの電子メールクライアントによく表示される可能性が高いことです。 Googleメールや他の古いメールソフトウェアでうまく機能するように見えるいくつかのテクニックを次に示します。

  • CSSスタイルではなく、BGColor属性を持つTDセルの背景色を定義します。 上記のように、
  CSSを使用する代わりに、背景画像にはTDセルの背景属性を使用します。このアプローチの副作用の1つは、背景画像を必要に応じて高くすることができることです。電子メールテンプレートで使用されているコンテンツのサイズが異なる可能性が高い場合、この方法で上背の高い画像を使用すると、電子メールの縮小または展開コピーの高さに応じて、あるメールから次のメールまで。ただし、Outlook 2007は背景画像を完全に無視していることを忘れないでください
  • うまく機能する場合は、パディング宣言を使用して、TDセル内のマージンを制御します。マージンスタイルはこれらのセルでは機能しませんが、パディングは
  • TDセルの周りに境界線が必要な場合は、GoogleメールがTDセルの周りに境界線をDivで定義するときに境界線を表示することに留意してください。
  暗い背景色に対する明るい色のリンクが必要な場合は、TDセルにフォント定義を置きます（PoがPとAタグに等しく適用されます）。
  • PとAフォントが異なるサイズのように見える場合は、AタグをPタグに包みます。
  Google Mailは、Google Mailユーザーインターフェイスの右側の列を積極的に使用します。これにより、HTML電子メールがセンターパネルに絞り込みます。コンテンツTDSのパディングスタイルがすべて丸い10ピクセルに設定されていることを確認してください。そうすれば、テキストが左と右のエッジに当たらないようにしてください。
  • GoogleメールアカウントでHTMLメールをテストすると、TD、H1、H2、P、A、およびその他のタグで1つ以上のフォントスタイルが欠落していることがわかります。すべてのフォントを慎重に検査して、Googleメールがフォントを正しく表示していることを確認してください。
  • Googleメールに加えて、HTMLメールを作成するときにプログラマーが直面するもう1つの明白な危険があります：Lotus Notesがあります。多くの大企業は、メモのインストールをサポートし、アップグレードし続けています。
  残念ながら、どの企業がメモを使用しているかを伝えることは不可能です。最良のアプローチは、この記事で説明されているガイドラインに従うことです。コードがより原始的であればあるほど、完全ではないにしても、メモでうまく機能する可能性が高くなります。
  • lotusのメモが、ほとんど信じられないほどのHTML電子メールに導入される可能性が非常に高いことです。たとえば、メモの古いバージョンは画像を独自の形式に変換したり、1つの電子メールで完璧な基本的なHTMLを無視したりするだけでなく、別のメールで他のHTMLを表示します。
  ここに、HTMLメールを適切に表示するようにメモを納得させるのに役立ついくつかのヒントがあります：
  • 前述のように、
    • すべての内部レイアウトテーブルを含むコンテナテーブルを使用します（たとえば、ヘッダー、コンテンツ、フッターなど）。これにより、メールがHTMLの1つのチャンクにまとめられているため、メモに表示されるとレイアウトのピースがさまよう可能性が低くなります。
    幅をパーセンテージに設定するか、少なくとも5のセルパディングを使用して、コンテナテーブルの周りに溝を作成します。
    • 前述したように、メールのヘッドタグにスタイル宣言を使用しないでください。これは、Web標準に準拠するアプローチかもしれませんが、ノート（Google Mailなど）がスタイルを削除する可能性があります。代わりに、テーブル内のインラインスタイル、TD、H1、H2、P、A、およびその他のタグに依存しています。
    Webサーバーに保存されている画像に絶対URLを使用します。画像を変換するメモについてはあまりできませんが、リモート画像を使用すると役立つ場合があります。 名前付きアンカーを使用して、メモで動作することはめったにありません。電子メールを特定のコンテンツにジャンプするリンクを避けるのが最善です。
    • HTMLテーブルのコルスパンを避けてください。メモ、特に以前のバージョンは、基本的なテーブルレイアウトのみを扱うことができます。
    TDセルの幅が正確であることを確認してください。すべてのセルを最も幅の定義幅に自動的に設定するWebブラウザーとは異なり、定義された幅に基づいて各TDセルのサイズを記録します。
    • メールレイアウトのセンタリングは通常、メモでは機能しません。通常、電子メールのレイアウトは左に調整する必要があります
    これらの手法を使用してGoogle MailとLotus Notesで成功したレンダリングを実現すると、Outlook 2007にもメールが正常に表示され、古いHTMLレンダリングエンジンが使用されます。 Microsoftは、電子メールソフトウェアが適切に表示するものについての詳細を公開しています。詳細については、この記事の最後にあるリソースセクションをご覧ください）。 電子メール配信サービスであるキャンペーンモニターには、人気のあるすべてのモバイル、Web、デスクトップメールクライアントのCSS要素サポートの包括的なリストがあります。
    • ステップ5：電話とタブレットのコーディング
    • 驚くべき数の人々は、スマートフォンやタブレット、およびデスクトップメールソフトウェアでHTMLメールを読みます。これらのデバイスによく表示するようにHTMLテーブルを適応させることはやや簡単であることがわかります。 CSSサポートは、新しい携帯電話やタブレットで使用されるHTMLレンダリングエンジンに非常に適しています。
    ソリューションは、CSS @Media定義を使用してHTMLテーブルTDセルをターゲットにし、適切に表示するために必要なフォントサイズをブーストすることです。たとえば、iPhoneのフォントは、読みやすくするには13ピクセルである必要があります。最良の部分？ WebMailとデスクトップの電子メールソフトウェアは、携帯電話とタブレットがコードを読み取り、すべてを完全に表示する間、@mediaの定義を剥がすか無視します。
    • @Media定義のサンプルセットは、携帯電話とタブレット用の1列のレイアウトHTMLテーブルを表示するためのサンプルセットです。

    <span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

    この@Mediaコードをボディタグの真下に、テーブル定義とTDセルに配置します。 HTML電子メールが480ピクセル未満のデバイス（またはWebブラウザー）で表示されると、これらの定義がアクティブになります。

    2列のHTMLメールをコーディングする秘secretは、小さな電話やタブレットの画面に適応しますか？各列を独自のテーブルに入れます。次に、各HTMLテーブルについて、インラインCSSを使用してフローチします。次に、テーブルの定義とTDセルに追加します。 上記の@mediaコードを使用して、幅480ピクセル未満の画面の場合、列テーブル、左右の列、左のコンテンツ列と同じ幅に列を設定し、メイン列の下にスライドします。

    このアプローチを使用して、レイアウト設計の変更をターゲットにして、電話やタブレットで動作します。

    このソリューションは、キャンペーンモニターの優れたガイド、レスポンシブメールデザインから来ています。これには、HTMLの電子メールをさまざまな画面サイズに応答する方法についてさらに詳細とアイデアがあります。

    要約

    メールを受け取った多くの人々は、いくつかの理由でテキストよりもHTMLを好みます。ただし、プログラマーの場合、一貫して表示されるHTMLメールを作成するタスクは、シンプルで恐ろしく複雑に見えます。この記事では、電子メールソフトウェア全体で機能するマークアップを作成するための多くの問題と戦略について説明しています。

    この記事から奪うのに最適なアイデアは何ですか？簡単な電子メールデザインとより複雑なソリューションの間に選択できる場合、シンプルさは常に最も安全な賭けです。

    さらに読み取り

    これらのリソースは、HTMLメールのコーディングについてもっと知りたい場合に役立つ貴重な情報を提供します。

    キャンペーンモニター：電子メールのCSSサポートのガイド

    キャンペーンモニター：応答性のある電子メールデザイン

    MailChimp：モバイルデバイスでメール

    MailChimp：電子メールのblueprints

    MailChimp：電子メールマーケティングフィールドガイド
    • そして、ここにもう少し…
    • 電子メール標準プロジェクト
    • 電子メール標準プロジェクトは、おそらく、HTMLとCSSがさまざまな電子メールクライアントによってサポートされている程度を正確に理解するための最良の出発点です。また、このサイトは、電子メールソフトウェア間のコンプライアンスを比較するために使用できる酸性テストを維持しています。また、Web標準の電子メールサポートを改善するために参加できるいくつかの方法があります。
    • 無料のキャンペーンモニターとMailChimp HTML Email Templates

    これらの電子メール配信サービスはどちらも、さまざまなメールクライアントを使用して、時間の経過とともにテンプレートを積極的にテストします。ただし、それぞれがとるアプローチには微妙な違いがあります。キャンペーンモニターは、ヘッドタグ内にスタイル宣言を配置しますが、MailChimpはそうではありません。メールリストの受信者が使用するメールクライアントを使用して、最終的なHTMLコードを必ずテストしてください。

    プレーンテキストメールデザインガイドラインhtmlメールのテスト
    この記事では、複数の電子メールクライアントにわたるテスト手順について説明します。  その他の関連記事には、HTMLメールレイアウトの作成や多変量テストの理解が含まれます。

    ブロックされた電子メール画像に関する記事
    

    "> Clickzとキャンペーンモニター

    2004年から、Clickzの記事は、主要な電子メールソフトウェアが画像がブロックされたときの比較、またはコンテンツがプレビューペインでどのように表示されるかを示しています。キャンペーンモニターの記事はより詳細に説明され、実際の例とアイデアに、メールのデフォルトのイメージオフレンダリングと戦う方法と、プレビューペインで大丈夫に見えるようにメールを設計する方法。
    
    Word 2007 HTMLおよびCSSレンダリング機能Outlook 2007 Outlook 2007がHTMLおよびCSSに対してレンダリングするものの公式マイクロソフトの説明。 DreamWeaverで機能するバリデーターへのリンクと、Microsoft編集ツールが含まれています。
    MailChimp：HTML Email Templates Guiting Guide

    スパムフィルターの仕組みなど、HTMLメールのすべての側面に関する多くの素晴らしい情報があります。プロセスを簡単にするための適切なツールが含まれています。 「HTMLメールの秘密」シリーズ

    cssと電子メール、木でキス

    HTML電子メールに対するこの優れたCSSのみのアプローチは、リスト別に公開されました。注：著者は、この記事の更新を作成し、キャンペーンモニターブログに投稿され、HTMLメールでCSSプレゼンテーションを最適化しました。
    HTMLコードが電子メールの配信可能性にどのように影響するか

    異なる電子メールサービスがHTML電子メールに含めるHTMLをどのように表示するかを説明する適切な概要。すべての問題に直接対処することはできません（たとえば、メールサービスプロバイダーのHTMLとテキストバージョンの間に明確な境界を作成することは、使用する場合は問題です）が、何が起こるかを知るのに役立ちます。 初心者の6段階の電子メールマーケティングガイド成功
    

    アクセス可能なタイトルが提案するよりも完全にトピックをカバーする電子メールマーケティングのガイドを紹介します。これには、電子メールテンプレートの構築中に行うデザインの決定から読者から最良の結果を得るための良い情報のセクションが含まれています。 2020年後半からのものなので、今日のように電子メールマーケティングの分野について堅実な見通しを提供します。

    2020年にブログを始める方法（そしてお金を稼ぐ）：ブログを始めるための簡単なガイドに関するよくある質問（FAQ）
    HTMLメールニュースレターのコーディングのベストプラクティスは何ですか？

    HTMLメールニュースレターのコーディングは少し難しい場合がありますが、ベストプラクティスに従うことでプロセスをよりスムーズにすることができます。まず、レイアウトには常にテーブルを使用します。最新のWebデザインとは異なり、電子メールデザインはまだテーブルに大きく依存しています。第二に、インラインCSSは行く方法です。これは、すべての電子メールクライアントが組み込みまたはリンクされたCSSをサポートしているわけではないためです。第三に、幅、高さなどにHTML属性を使用します。これにより、メールが異なるメールクライアントに正しく表示されることが保証されます。最後に、送信する前に常にメールをテストしてください。オンラインで利用できるさまざまなツールがあり、メールが異なるメールクライアントでどのように見えるかをテストできます。デスクトップコンピューターから携帯電話まで、すべてのデバイスで見栄えを良くします。これを実現するには、CSSでメディアクエリを使用できます。メディアクエリを使用すると、デバイスの画面サイズに応じてさまざまなスタイルを適用できます。ただし、すべての電子メールクライアントがメディアクエリをサポートするわけではないため、モバイルファーストアプローチでメールを設計することが重要です。これは、最初に最小の画面を設計してからメディアクエリを追加して大規模な画面に適応することを意味します。

    HTMLメールニュースレターでWebフォントを使用できますか？ HTMLメールニュースレター。ただし、すべての電子メールクライアントがWebフォントをサポートしているわけではないことに注意してください。そうでない人のために、常にフォールバックフォントを提供する必要があります。これは通常、ArialやTimes New Romanのように広くサポートされている標準フォントです。 Webフォントを使用するには、 @font-faceルールを使用してCSSにフォントファイルを含めます。 htmlメールニュースレターは、

    タグを使用して実行できます。ただし、留意すべきことがいくつかあります。まず、

    タグに幅と高さの属性を常に含めてください。これにより、画像が正しく表示されます。第二に、画像に絶対URLを使用します。これは、画像ソースが相対パスではなく、完全なURLである必要があることを意味します。最後に、画像に常にALTテキストを含めてください。これは、画像をロードできない場合に表示される画像の説明です。

    すべてのメールクライアントでHTMLメールニュースレターの見栄えを確認するにはどうすればよいですか？

    HTMLメールニュースレターがすべてのメールクライアントで見栄えが良いことを確認してください。ただし、使用できる戦略はいくつかあります。まず、常にレイアウトにテーブルを使用し、インラインCSSを使用してください。これらは、電子メールクライアント全体で広くサポートされています。第二に、送信する前に、さまざまなメールクライアントでメールをテストします。これを行うことができるオンラインツールがあります。最後に、デザインをシンプルにしてください。デザインが複雑であればあるほど、特定の電子メールクライアントを壊す可能性が高くなります。

    HTMLメールニュースレターにアクションに至るボタンを追加するにはどうすればよいですか？ HTMLメールニュースレターは、HTMLとCSSを使用して実行できます。最も簡単な方法は、CSSを使用してタグを使用してボタンのようにスタイリングすることです。ただし、電子メールクライアント間のより良い互換性のために、ボタンのように見える1つのセルとスタイルを備えたテーブルを使用できます。 🎜> html電子メールニュースレターに背景色を追加することは、CSSを使用して実行できます。バックグラウンドカラープロパティを使用して、メール全体やテーブルやテーブルセルなどの特定の要素に背景色を設定できます。ただし、すべての電子メールクライアントが背景色をサポートしているわけではないことに注意してください。そうでない人のために、HTMLにBGColor属性を使用してフォールバックカラーを提供する必要があります。ニュースレターは、タグを使用して実行できます。 Webサイト、メールアドレス、または電話番号にリンクできます。 Webサイトにリンクするには、Webサイトの完全なURLでHREF属性を使用します。メールアドレスにリンクするには、HREF属性のMailTo：Protocolを使用します。電話番号にリンクするには、HREF属性のTel：Protocolを使用してください。ニュースレターは、画像とリンクを使用して実行できます。アイコンイメージに

    タグを使用し、タグにラップしてソーシャルメディアプロファイルにリンクします。画像にALTテキストを常に含め、画像ソースとリンクHREFの両方に絶対URLを使用します。

以上がHTMLメールニュースレターと電子メールテンプレートをコーディングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。