web-dev-qa-db-ja.com

GmailのHTMLメールのスタイル設定

私は、内部スタイルシートを使用するHTMLメールを生成しています。

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

Gmailで表示すると、内部スタイルシートのすべてのスタイルが無視されているようです。 Gmailはインラインルール以外のすべてのスタイルを無視しているようです。

 <h2 style="color: red">Email content here</foo>

これは、Gmailで表示するときにHTMLメールをスタイル設定するための唯一のオプションですか？

htmlcssgmailhtml-email
89
Dónal

すべてにインラインスタイルを使用します。このサイトは、クラスをインラインスタイルに変換します。 http://premailer.dialect.ca/

62
substate

ここでの回答は、2016年9月30日現在のものです。Gmailは現在、メディアクエリと同様、styleのheadタグに対して ロールアウトサポート です。 Gmailが唯一の懸念事項である場合は、現代の開発者のようなクラスを使用しても安全です。

参考のために、公式gmail CSSドキュメントを確認できます。

補足として、Gmailはstyle（ reference 、とにかく更新するまで）をサポートしなかった唯一の主要なクライアントでした。つまり、スタイルのインライン配置を安全にalmost停止できます。あいまいなクライアントの中には、まだそれらを必要とするものがあります。

12
Matthew Johnson

Gmailは、ヘッドエリアでスタイルタグの基本的なサポートを開始しました。まだ公式なものは見つかりませんでしたが、自分で簡単に試すことができます。
クラスおよびIDセレクターは無視されるようですが、基本的な要素セレクターは機能します。

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

メール本文を含むdivに限定された独自のヘッド領域にスタイルタグを作成します

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
11
fuchs777

クラスとインラインスタイルをサポートするすべての人に同意します。これまでにこれを学んだかもしれませんが、スタイルシートに1つの間違いがある場合、Gmailはそれを無視します。

CSSが完璧だと思うかもしれません。頻繁にやったことがあるのに、なぜCSSに間違いがあるのでしょうか。 CSS検証ツール（たとえば、 http://www.css-validator.org/ ）で実行し、何が起こるかを確認します。 Gmailの表示に関する問題に遭遇した後、それを行いましたが、驚いたことに、Microsoft Outlook固有のスタイル宣言がいくつか間違いとして表示されました。

それは理にかなっているので、スタイルシートからそれらを削除し、only for Microsoftコードブロックに入れました。

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

これは簡単な例ですが、知っている人には、いつか役に立つかもしれません。

3
Shawn Spencer

他の人が言ったように、いくつかの電子メールプログラムはCSSスタイルを読みません。すでにWebメールを作成している場合は、zurbから次のツールを使用して、すべてのスタイルをインライン化できます。

http://zurb.com/ink/inliner.php

これは、メールチンプ、キャンペーンモニターなどから上記のようなテンプレートを使用するときに非常に便利です。これらのテンプレートは、一部の電子メールプログラムでは機能しないことがわかっています。このツールは、それを読み取るメールプログラムにスタイルセクションを残し、すべてのスタイルをインラインに配置して、必要な形式でより普遍的な読みやすさを実現します。

2
Chad Dupuis

メールを送信するためのサービスとツールは、CSSをインライン化して、<style>タグ内のCSSをGmailで機能させることができることに注意してください。

たとえば、MailChimpでメールを送信している場合、<style>タグからのCSSはデフォルトで自動的にインライン化されます。 Mandrillでは、[設定]タブの[デフォルトの送信]セクションで[HTMLメールのインラインCSSスタイル]ボックスをチェックすることで、この機能を有効にできます（ただし、デフォルトでは無効になっています パフォーマンス上の理由により ）。

Image showing how to do this in Mandrill

2
Mark Amery