何だこれは！？
あるカラフルなHTMLメールを送信して、Gmailクライアントでテストをしていたある日。。。
なんだこれは！？！？
Gmailクライアントの色の変えようにびっくりしてしまいました。
しかし、ここまで色を変えられるとデザインによっては大きく雰囲気が変わってしまいます。
本記事ではGmailでも任意に色を設定することを目的としています。
| Gmailクライアント（ライトモード） | Gmailクライアント（ダークモード） | iOSのデフォルトメールクライアント（ダークモード） |
|---|---|---|
 |
 |
 |
色を変えたくない！！
対象メールのHTML
<html>
<head>
<style type="text/css">
.blue {
background: #0000FF ;
text-align: center;
color: #FFFFFF;
}
.navy {
background: #000080;
text-align: center;
color: #FFFFFF;
}
.green {
background: #008000;
text-align: center;
color: #FFFFFF;
}
.lime {
background: #00FF00;
text-align: center;
color: #000000;
}
.aqua {
background: #00FFFF;
text-align: center;
color: #000000;
}
.yellow {
background: #FFFF00;
text-align: center;
color: #000000;
}
.red {
background: #FF0000;
text-align: center;
color: #000000;
}
.purple {
background: #800080;
text-align: center;
color: #FFFFFF;
}
</style>
</head>
<body>
<h1>テストメール</h1>
<div class="blue">
<h2>blue</h2>
</div>
<div class="navy">
<h2>navy</h2>
</div>
<div class="green">
<h2>green</h2>
</div>
<div class="lime">
<h2>lime</h2>
</div>
<div class="aqua">
<h2>aqua</h2>
</div>
<div class="yellow">
<h2>yellow</h2>
</div>
<div class="red">
<h2>red</h2>
</div>
<div class="purple">
<h2>purple</h2>
</div>
</body>
</html>
linear-gradient()を使う
linear-gradientで背景色を作ると、画像として認識され色が変わらないというハックがあります。
以下のように、backgroundに対して、linear-gradient(カラーコードA, カラーコードA) というように同じ色を指定します。
.blue {
background: linear-gradient(#0000FF, #0000FF) ;
text-align: center;
color: #FFFFFF;
}
| Gmailクライアント（ライトモード） | Gmailクライアント（ダークモード） |
|---|---|
|
 |
このように色を固定して表示することができました。