HTMLメール作成時の注意点_html/css_WEB-ITnose

以前、Python でフロントエンド HTML メールを作成したいという需要があったので、そのプロセスの経験も積んできました

1. css を外部リンクしないでください

css のサポートについては、を参照してください。 http://www.campaignmonitor.com/css/ には、さまざまな電子メール システムでのサポートの統計リストが含まれています。内部には

が表示されます。そこで、HTML タグ属性または style 属性を通じてページの CSS スタイルを設定します。そして、HTML メールの開発には黄金律があります:

HTML に属性が存在する場合は、CSS スタイルではなくタグ属性を絶対に使用してください 。

2. テーブル レイアウトを使用する

なぜ古代のテーブル レイアウトを使用するのでしょうか?電子メール クライアントは通常、比較的原始的な解析方法を採用しているため、電子メール クライアントをブラウザの世界における IE6 にたとえることができます。

div を使用し、レイアウトにposition または float を使用する場合、

Position 属性は Outlook07/10/13、Yahoo! Mail、Google Gmail ではサポートされていないため、

float 属性は両方の Outlook クライアントでサポートされていませんと Web ページのサポート、

そのため、互換性は低く、場合によってはページが醜くなります。

したがって、古いテーブルのネストされたレイアウトが最も安定しており、align="center" を通じてユニバーサルセンタリングを実現できます

3. すべての img タグに alt 属性と border=0 を設定します

alt 属性を設定します これ画像を表示しないようにするために、少なくともユーザーが意味を理解できるようにテキストの説明があります。

border=0 を設定します。なぜ border=0 を設定する必要があるのか​​わかりませんが、より多くの状況で画像を表示できるようになります。

もちろん、Gmail の Web ページを QQ メールボックスの Web ページに送信するなど、まだサポートされていない場合もあります (画像はまだ表示されません。ソース コードを確認して、img の src 属性と alt 属性が正しく設定されていないことを確認してください)タグは調和されています)

同時に、img の display:block 設定を使用して、一部の電子メール クライアント画像の下の空白を修正することができます。

さらに、画像を使用する必要がある場合は、画像をサーバーにアップロードするか、小さな画像には直接 Base64 を使用するのが最善であると個人的にお勧めします。

4. 背景色を設定するときは、必ず 6 つの完全な 16 進エンコードを使用することを忘れないでください。3 つの省略文字を使用すると、常に機能するとは限りません 。

背景色属性はすべての電子メール システムでサポートされていますが、値を割り当てるときは 6 つの完全な 16 進コードを使用することを忘れないでください。

黒であっても #000 ではなく #000000 を使用してください

5. margin ではなく、padding を使用します

margin 属性は、Web バージョンの Outlook ではサポートされていません

padding はすべてをサポートします少なくとも私はこれまでパディングを使用していましたが、互換性の問題はありませんでした。

しかし、テーブルレイアウトではパディングは問題ないとインターネットで読みましたが、divレイアウトを使用するとパディングが制御できなくなります。これはまだ試していません。

これは、以前に HTML メールを行った経験であり、今後も何か得たことがあれば追加していきます。