GmailのHTMLメールのスタイル

99

内部スタイルシートを使用する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メールをスタイルするための唯一のオプションですか？

— ドナル
ソース

14

はい、多くのWebベースの電子メールクライアントは内部のスタイルシートを認識しないため、これは唯一の方法です。実際、インラインスタイルは、HTMLニュースレターをデザインするための推奨方法です。

— Mike

私の知る限り、電子メールリーダーはhtml 3.2およびcss 1.1をサポートすることが期待できます。

どのようにメールを生成しましたか？つまり、意図を作成するコードを追加しますか？

— RaphMclee 2012

7

一般に、開始<html>タグを使用することをお

— 勧めし

1

Gmailはひどい。iOSアプリとWebベースのアプリも！

— Adrian Florescu 2015年

19

ここでの回答は、2016年9月30日の時点で古くなっています。Gmailは現在、のタグとメディアクエリのサポートを展開しています。Gmailだけが気になる場合は、最新の開発者のようなクラスを使用しても安全です。stylehead

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

ちなみに、Gmailはサポートされなかった唯一の主要なクライアントでしたstyle（参照、とにかく更新されるまで）。つまり、スタイルをインラインで配置するのをほぼ安全に停止できます。あいまいなクライアントの中には、まだ必要なものもあります。

— マシュー・ジョンソン
ソース

1

まだ機能しないようです。リトマスで試してみましたが、動作しません。何か特別な理由はありますか？

— Arian

@ArianHosseinzadeh何がうまくいかないのですか？問題に関するドキュメントへの参照を追加しました。

— Matthew Johnson

私たちはリトマスでそれを試しました、そしてそれは非インラインのスタイリングを無視します。彼らがそれを発表した後、あなたはGmailのために<style>を試しましたか？うまくいきましたか？

— Arian

1

@ArianHosseinzadehドキュメントの例からコピーアンドペーストを行い、putsmailで実行しました。スタイルがGmailに表示されています。ChromeブラウザでAndroid GmailアプリとGmailを確認しました。私の推測では、Litmusのプレビューは変更を反映するように更新されていません。

— マシュージョンソン

1

なぜ自分のスタイルが機能しないのかと思っていたところ、bodyタグの代わりにタグ内に配置したことに気付きましたhead。

— palswim

67

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

— サブステート
ソース

2

このサイトは素晴らしいです。警告を表示し、プレーンテキスト出力を提供するだけでなく、HTMLを作り直します。

— jamesbar2

1

このPremailerはRubyで提供されています。ソースはgithub.com/premailer/premailerです。Pythonにはもう1つ、premailer.ioソース：github.com/peterbe/premailerがあります。どちらもオープンソースです。

— Maxime R.

1

この答えはもはや正確ではありません。gmailはスタイルとクラスをサポートし、主題に関する公式ドキュメントがあります-以下のMatthew Johnsonの回答を参照してください。

— mikemaccana 2016年

12

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>

— fuchs777
ソース

それはまだ少し残念ですが、それでもメディアクエリをサポートしていません。クラスとIDも役に立ちます:)

— Eoin

2

メディアクエリも実行し、CSSスタイル設定を完全にサポートします。stackoverflow.com/questions/39759764/...

— crowmagnumb

7

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

あなたは自分のCSSが完璧だと思うかもしれません、あなたはそれを頻繁に行ったので、なぜ私のCSSに間違いがあるのでしょうか？CSS Validator（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]-->

これは単純な例にすぎませんが、いつか役に立つかもしれません。

— ショーンスペンサー
ソース

おかげで、無効なCSSに関する部分で多くの時間を節約できました。まだいる場合はお知らせください。

— Shadow WizardはEar For Youです

1

@ShadowWizardさん、こんにちは。しばらくいなくなったが帰ってきた。時間を節約できてうれしいです。

— Shawn Spencer

乾杯、賞金が無駄にならないようにしたかっただけです。:-)

— シャドウウィザードはあなたのための耳です

2

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

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

これは、メールチムプやキャンペーンモニターなどから上記のようなテンプレートを使用する場合に非常に便利です。このツールは、スタイルセクションをメールプログラムが読み取るために残し、すべてのスタイルをインラインに配置して、希望する形式でより一般的な可読性を実現します。

— チャドデュプイ
ソース

インライナーリンクをありがとうございます。

— Shawn Spencer

2

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

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

マンドリルでこれを行う方法を示す画像

— マーク・アメリー
ソース

0

Mailjetでテンプレートを設計しているときにも同じ問題が発生しました。この問題の解決策は、<style>タグ内のCSSコードを縮小することでした。

— ヴォイチェフ・レミシュ
ソース