HTML メールを送信していますが、 Yahoo、Hotmail、Gmailなどのメール クライアントによってメールの表示が異なります。タグを<style>
使用してモバイル デバイスのメディア クエリを使用し、次にそのスタイル シートを使用して Yahoo と Hotmail を使用しました。
5 に答える
メール クライアントはすべて CSS を異なる方法で処理します。サポートするプロパティが異なり、一部を明示的に許可しない場合もあります。Web ブラウザーのスタイリングよりもはるかに困難です。
メールのデザインを作成するためのリソースを次に示します。
さまざまなメール クライアントでの CSS サポートの表(@donald123 の回答から)
HTML メール テンプレート ビルダー(@cassi.lup の回答から)
モバイル デバイスのメールで CSS を最適化するためのガイド
Mailchimps メール テンプレート(@cassi.lup の回答から)
次の 2 つのオプションがあります。
- 正しくフォーマットされたテンプレートから始めて、そこからデザインを進めてください。この問題で非常に役立つリソースは、このサービスです。ただし、CSS トリックに関しては非常に制限されていることに注意してください。
- 画像から HTML 形式のメールを作成します。そうすれば、使用しているデザイン要素が同様に解釈されるため、すべてのブラウザーで一貫性が保たれます。
別の便利なリソース: http://mailchimp.com/resources/html-email-templates/
HTML メールの CSS はシンプルでなければならないことに注意してください。すべてのクライアントがすべての CSS スタイルを理解できるわけではありません :-(
たとえば、レイアウトにテーブルを使用することは、HTML メールでは適切な ID です ...
HTML メールのスクリプトを作成する最適な方法を Google で検索してみてください。主要なクライアントでの CSS スタイルの理解に関する簡単な概要は、ここで見つけることができます
個人的に、私は常にDoctypeなしでhtmlフィールドを作成します。次に、html、head、body の開始タグと終了タグだけです。次に、テーブルを使用し、インライン スタイルシートのみを使用します。また、私の経験では、テーブルの境界線、セルのパディング、およびマージンを削除することを忘れないでください。
スペースを埋めるには、表のセルを使用し、一部の電子メール クライアントはこれらを無視するため、パディングやマージンを使用しないでください。
そして何よりも重要です!背景を使用しないでください。多くの画像を使用しないようにしてください。ヘッダー、フッター、または製品画像などに使用します。
それが役立つことを願って、グラマーに申し訳ありません;)
メールのスタイルについては、このサイトから理解を深めることができます。