メールニュースレターのHTMLテンプレートをデザインしています。多くのメールクライアントはリンクされたスタイルシートを無視し、他の多く（Gmailを含む）はCSSブロック宣言を完全に無視することを学びました。インラインスタイル属性は私の唯一の選択肢ですか？HTMLメールのスタイルを設定するためのベストプラクティスは何ですか？
回答:
キャンペーンモニターには、さまざまなメールクライアントでサポートされているものとサポートされていないものを詳しく説明する優れたサポートマトリックスがあります。
Litmusのようなサービスを使用して、複数のクライアント間でメールがどのように表示されるか、およびそれらがフィルターなどに捕捉されるかどうかを確認できます。
私は以前にHTMLメールの戦いと戦ったことがあります。メールクライアント間の互換性を最大にするためのスタイル設定に関するヒントをいくつか紹介します。
インラインスタイルは親友です。スタイルシートをリンクしたり、<style>タグを使用したりしないでください（たとえば、GMailはそのタグとその内容すべてを削除します）。
あなたのより良い判断、使用、乱用に対して。 <div>sはそれをカットしません（特にOutlookの場合）。
背景画像を使用しない。むらがあり、迷惑になります。
一部のメールクライアントは、入力したハイパーリンクをリンクに自動的に変換します（アンカーしない場合） <a>自分でし）。これにより、マイナスの効果が生じる場合があります（たとえば、各ハイパーリンクに異なる色を表示するスタイルを設定している場合）。
実際のリンクを別のものとハイパーリンクするように注意してください。たとえば、入力せずにhttp://www.google.comリンクしますhttps://gmail.com/。一部のクライアントは、メッセージにスパムまたはジャンクとしてフラグを立てます。
画像をできるだけ少ない色で保存しますサイズを節約するために保存します。
可能であれば、メールに画像を埋め込みます。メールをダウンロードするために外部のウェブサーバーにアクセスする必要はなく、メールの添付ファイルとして表示されることもありません。
そして最後に、テスト、テスト、テスト！各電子メールクライアントは、ブラウザーとは異なる方法で動作します。
<div>、Outlookはコンテンツを超えて色を拡張しません。つまり、パディングは色付けされません。
<img>。そうのようなタグ、<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
cid。
メールチンパンジーは何をすべきでないかについてかなり良い記事を持っています。（私はそれがあなたが望むものに対して間違った方法で聞こえることを知っています）
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
一般的に、あなたが学んだすべてのことは、Webデザインの悪い習慣であり、HTMLメールの唯一のオプションのようです。
基本は次のとおりです。
できるだけ多くのメールクライアントでテストするか、上記で提案した他の人と同じようにLitmusを使用してください！（ジムへのクレジット）
編集：
メールチンパンジーはこのツールを作ることで素晴らしい仕事をしましたをコミュニティで利用できるようにするました。
CSSクラスをHTML要素にインラインで適用します！
ここに投稿された回答に加えて、必ずこの記事を読んでください。
私がHTMLメールについていつも戻ることになるリソースは、CampaignMonitorのCSSガイドです。
彼らのビジネスは電子メール配信のみを対象としているので、彼らは自分のものだけでなく誰もが
「フレイド。スタイルシートを使用してHTMLページを作成し、jQueryを使用してスタイルシートを各要素のスタイル属性に適用します。このようなもの：
var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
$('body *').css(styleAttributes[i],function () {
$(this).css(styleAttributes[i]);
});
}次に、DOMをコピーして、メールで使用します。
画像マッピングはかなりうまく機能していることがわかりました。画像であるヘッダーまたはフッターがある場合、ほとんどの場合Outlookでは画像が読み込まれず、透明なヘッダーが残るため、bgcolor = "空白を埋める"を適用してください。少なくともメールの全体的な感触で機能する色を指定すれば、ユーザーのショックは少なくなります。スタイリングシートを使用しないでください。またはまったくCSS！ただそれを避けなさい。
単語または共有Googleドキュメントからコンテンツをコピーするかどうかに応じて、（command + F）すべての（ '）と（ "）を見つけて編集ソフトウェア（特にdreemweaver）内で置き換えてください。コードとして表示されるためです。そしてそれはただ良くない。
ALTはあなたの親友です。ALTタグを使用して、すべての画像にテキストを追加します。オッズは正しくロードされないためです。そしてそのALTテキストは人々に（画像を見る）ボタンをクリックさせるものです。また、画像の幅、高さを定義し、境界線を0にして、画像の周りに奇妙な線が表示されないようにします。
Photoshop内のすべての画像を編集することを検討してください。画像の両側に15pxの境界線を付けます（背景を透明にし、PNG 24として保存します）。メールクライアントは、画像に適用するパディングスタイルを読み取らないことがあるので、奇妙なフォーマットが回避されます。
また、リンクの下の行が特に煩わしいので、<style = "text-decoration：none; color：#whatever color here here！"を適用すると、>それは行を削除し、あなたに望ましい外観を与えます。
全体的なルックアンドフィールを実際に混乱させることができるものがたくさんあります。