CSSでがっつりスタイルを指定したおしゃれなHTMLメールを作ったのに、Gmailで開いてみると・・・「アレ、スタイルが効いてないよ？！」といった時の対処法です。
GmailでHTMLメールのCSSが効かない原因
Gmailを代表としたウェブメールクライアントはメールを表示する際に、セキュリティ上の脅威と思われる任意の要素を削除します。
一般的に取り除かれる要素は、
- JavaScript
- objectタグ：文書に外部リソースを埋め込む
- embedタグ：動画や音声などのプラグインが必要なデータをページに埋め込む
- Flash
があります。
これらに加え、Gmailでは、<head>と<body>の中に記述された<style>タグを削除します。
CSSのスタイル指定の方法
HTMLにスタイルシートファイルを読み込む
<head>タグ内に、読み込むスタイルシートを指定します。
<link href="<CSSファイルのURL>" rel="stylesheet" type="text/css">
hogehoge.cssファイルを読み込む場合
<html>
<head>
<link href="hogehoge.css" rel="stylesheet" type="text/css">
</head>
</html>
HTMLファイルに直接書く
<head>または<body>内に、スタイルシートの設定を記述します。
<style type="text/css">
スタイルの設定を記述!
</style>
h1の文字色を赤にする場合
<html>
<head>
<style type="text/css">
h1 {color:red;}
</style>
</head>
<!-- または -->
<body>
<style type="text/css">
h1 {color:red;}
</style>
</body>
</html>
インライン形式
直接、タグにstyle="属性:値;"を記述します。
h1の文字色を赤にする場合
<html>
<body>
<h1 style="color:red;">赤色で表示されます</h1>
</body>
<html>
３つの指定方法からわかる通り、インライン形式以外の方法は、Gmailによって削除されてしまいます。
解決法：CSSの指定をインライン化する
各タグにstyle="属性:値;"を記述することで、Gmailで表示できるようになります。
けど、これって結構大変・・・。
自動でインライン化
変換サイトを使うと、自動で変換してくれます。
使い方
-
Choose your source from a URLにサイトのリンクを貼るか、Enter your source HTMLにソースコードを書く - [Convert]をクリック
実際に、変換したコードを貼ります。
変換前
<html>
<head>
<style type="text/css">
h1 {color:red;}
</style>
</head>
<body>
<h1>赤色で表示されます</h1>
</body>
</html>
変換後
<html>
<head>
</head>
<body>
<h1 style="color: red">赤色で表示されます</h1>
</body>
</html>
まとめ
一般的なウェブメールクライアントはメールを表示する際に、セキュリティ上の脅威と思われる任意の要素を削除してしまいます。
さらに、Gmailでは<head>と<body>の中に記述された<style>タグを削除します。
CSSを使ったHTMLメールを送信したい場合には、CSSをインライン形式で書く必要があります。
この作業は、とても地道なので、HTMLファイルに直接CSSを書いて、後で自動で変換するのがオススメです！