レスポンシブ メール テンプレートを作成しています。Thunderbird を使用していくつかのテストを送信しています。
ほとんどの電子メール クライアントでは、非常にうまく機能します。ただし、Gmail ではスタイルは適用されません。
CSS サポートを確認したところ、gmail は <head> タグ内の <style> のみをサポートしていることがわかりました。メールチンプ
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
これを知って、頭の中にスタイルを埋め込んだのですが、スタイルが GMAIL に適用されませんでした。
さまざまなフォーラムで調査して頭を悩ませた後、解決策が見つからなかったので、明らかなことを確認したところ、Thunderbird は <style> を <head> から <body> に移動することがわかりました
テンプレートを Thunderbird 経由で送信し、メールの送信元を見ると、次のようになります。
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Thunderbird/78.7.1
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="body">
<p>Hi Pierce,</p>
<p class="colored"> This text is blue if the window width is below
500px and red otherwise. </p>
<p>Jerry</p>
</div>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</body>
</html>
メールユーティリティを介してテンプレートを送信すると、動作は期待どおりで、スタイルは gmail で正しく機能します
X-Mailer: mail (GNU Mailutils 3.7)
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
Gmail のビュー:
サンダーバードがスタイルをボディに移動するのを防ぐには?
Thunderbird 78.7.1、Ubuntu 20.04.2 LTS を使用しています