HTMLメールをコーディングするための重要なヒントとコツ

HTMLメールコーディングの課題：さまざまなメールクライアントの特性と制限への対処

HTMLメールエンコードの最も難しい問題は、各メールクライアントに独自の機能と制限があることです。これらの違いは通常、プレーンテキストのウェブサイトアドレスをクリック可能なリンクに自動的に変換するが、電子メール開発に複雑さをもたらすなど、クライアントが誠意を持って追加した機能に起因します。さらに、セキュリティの問題も重要です。電子メールクライアントは、電子メールのHTMLとCSSが独自のインターフェイスのHTMLとCSSを妨げないようにする必要があります。悪意のある電子メールは、特定のCSS属性（絶対的な位置付けなど）を使用して、ユーザーに非表示のリンクをクリックするように誘導する場合があります。したがって、メールクライアントはHTMLメールコードを解析、フィルタリング、操作する必要がありますが、これは、メール開発者としての私たちがこれを認識し、コードを可能な限り友好的にする必要があることを意味します。

この記事は、SitePoint Premiumの「Crafting HTML Email」から抜粋されています。これは、HTMLメール開発のいくつかの重要なヒントとトリックを要約しています。

キーポイント

クライアント固有の違い：

各メールクライアントには独自の機能と制限があるため、HTMLメールエンコードは非常に困難です。これらの違いは、テキストを自動的にクリック可能なリンクに変換することなど、電子メール開発プロセスを複雑にするなどの機能に起因することがよくあります。

• Outlookのユニークなレンダリングエンジン：メール市場シェアのかなりの部分がOutlookで占められており、HTMLおよびCSSレンダリングエンジンとしてWordを使用します。これには、単語レンダリングの制限と機能を理解するなど、メッセージがOutlookに正しく​​表示されるようにするための特定のエンコード方法が必要です。
• セキュリティ対策とスタイルの制限を適応する：メールクライアントは、HTMLとCSSがインターフェイスを妨害するのを防ぐためにさまざまなセキュリティ対策を実装します。これにより、一部のCSSプロパティが変更またはフィルタリングされる可能性があります。これには、異なるクライアント間の互換性を確保するために、HTMLメールコーディングとスタイリングに対する慎重で情報に基づいたアプローチが必要です。
• サポートoutlook

2022年1月、Outlook（WindowsおよびMacOSバージョン）は、電子メール分析ツールLitmusのデータによると、電子メールクライアント市場シェアの4.44％を占めました。これはそれほど多くはないように思えるかもしれず、電子メール分析データに注意することを忘れないでください。しかし、電子メール開発中にOutlookのWindowsバージョンに遭遇する可能性は十分にあります。 OutlookのWindowsバージョンでHTMLメールをシームレスに実行するために知っておく必要があるものがあります。

Outlookレンダリングエンジンはどのように機能しますか

2007年以来、OutlookのWindowsバージョンは、HTMLおよびCSSのレンダリングエンジンとしてWordを使用しています。 Microsoftは、2009年にWordが使用された理由を説明しました Wordを使用してメールを作成し続けることにしました。これは、Wordユーザーが25年以上享受してきた豊富なツールを使用して、最高のメール作成体験だと考えているためです。

Wordは、HTMLとCSSをレンダリングするのが得意ではないだけでなく、この分野でのドキュメントが非常に不足しています。 Wordレンダリングに関する唯一の既存の公式文書は、2006年にMicrosoftが2006年にMicrosoftが公開したブログ投稿で、Outlook 2007のHTMLとCSSのレンダリング機能を説明しています。

これには、次の情報が含まれています

コア：
• 色、背景色、テキスト属性（フォント、フォントシリーズ、フォントスタイル、フォントサイズ、フォントの厚さ、テキストの変更、テキストアライメント、垂直アライメント、文字間隔、ラインの高さ、空白） 、境界線の略語特性（境界線、境界色、境界スタイル、境界幅、境界崩壊）およびその他の特性。
coreextended：
• テキストインデンテーションとマージンプロパティ（マージン、左マージン、右マージン、上限、下のマージン）。
フル：幅、高さ、高さ、塗りつぶし（左塗りつけ、右塗りつけ、上部の塗りつぶし、下部塗りつぶし）および境界の完全なプロパティ（左の境界線、左の境界色、左の境界幅、左の境界線スタイルなど）。
• および各カテゴリは、特定のHTML要素にのみ適用されます：

および

のみコア属性をサポートします。
1. <span></span><font></font>および <code>
コアとコアエクステンダウンのプロパティをサポートします。
2. Outlookでサポートされている他のすべての要素（<div>、<code><p></p>、、
3. 、、、、、など）コア、コアエクステンダー、フルプロパティをサポートします。 <code> これは、特定のスタイルを適用するために使用する要素を考慮する必要があることを意味します。したがって、一般的なコンテナ要素の幅または高さを定義する必要がある場合は、を使用します。充填する必要がある場合は、

   および

   、

   、

   も使用します。今日まで、OutlookのWindowsバージョンは、まだHTMLメールでフォームを使用している唯一の理由です。幸いなことに、これらのテーブルをOutlookのみに見えるようにし、より強力なメールクライアントからそれらを隠し、より多くのセマンティックコードを使用できるようにする方法があります。 <code>
   （次のコンテンツはスペースによって制限されます。キーテクニカルポイントの概要のみが保持されます。完全なコンテンツについては、元のテキストを参照してください）

   • 条件付きコメント：条件付きコメントを使用して、Outlookに特定のコードを追加します。
   • MSO-properties：Outlookの独自のCSS属性（mso->>> fixed）を使用して、特定のスタイルを実装します。
   • vml：VML（Vector Markup Language）を使用して、背景画像などのOutlookがサポートしていないプロパティをシミュレートします。
   • 120DPIレンダリング：一部のWindows構成でDPIスケーリングを適用するOutlookによって引き起こされるディスプレイの問題を解決します。
   • 自動リンクを避けます：さまざまな方法を使用して、電子メールクライアントがURL、電子メールアドレスなどをリンクに自動的に変換することを避けます。
   • 実際のURLを使用してください：<a></a>要素のhref
   • 空の追加：AndroidでYahoo Mailで要素を削除する問題を解決します。 <code>
   • 電子メールサイズを102kb未満に保ちます：メールサイズが102kbを超えるため、電子メールのコンテンツが切り捨てられないようにします。
   • CSSのコメントを削除：CSSコメントのためにYahooおよびAOLクライアントによって引き起こされるスタイルの失敗の問題を回避します。
   • html5ドキュメントタイプを使用します：要素のライン間隔に対するHTML5ドキュメントタイプの効果を処理します。 <img alt="HTMLメールをコーディングするための重要なヒントとコツ" >

   結論

   メールクライアントの処理の機能は、メール開発者の作業の一部です。電子メール開発者コミュニティをフォローし、最新の更新とプラクティスに注意することが重要です。 私たちが観察した問題について報告することにより、メールクライアントは独自のコードを改善および修正できます。これは遅いプロセスですが、HTMLメールは、より良い相互運用性と標準的なサポートを備えたより良い未来に向かっていると感じています。 これにより、インタラクティブなど、より楽しくてエキサイティングな機能への扉が開かれます！

   元のテキストの長さにより、この出力はいくつかの技術的な詳細を簡素化および要約することに注意してください。 詳細については、元のテキストを参照してください。

以上がHTMLメールをコーディングするための重要なヒントとコツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。