Help us understand the problem. What is going on with this article?

GmailでHTMLメールのCSSが効かない問題の対処法

More than 3 years have passed since last update.

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>

3つの指定方法からわかる通り、インライン形式以外の方法は、Gmailによって削除されてしまいます。

解決法:CSSの指定をインライン化する

各タグにstyle="属性:値;"を記述することで、Gmailで表示できるようになります。
けど、これって結構大変・・・。

自動でインライン化

変換サイトを使うと、自動で変換してくれます。

使い方

  1. Choose your source from a URLにサイトのリンクを貼るか、Enter your source HTMLにソースコードを書く
  2. [Convert]をクリック スクリーンショット 2016-06-19 22.54.13.png

実際に、変換したコードを貼ります。

変換前
<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を書いて、後で自動で変換するのがオススメです!

yn-misaki
見習いRubyエンジニア。エディタはVim派です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした