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

HTMLメールを作成したらレイアウトがダダ崩れした話

More than 3 years have passed since last update.

株式会社LITALICOでWebエンジニアをしています、 @negi です。

本記事は『LITALICO Advent Calendar 2016』5日目の記事となります!

HTMLメールをRailsのActionMailerを使って送る際に困ったこと、注意点について書こうと思います。

前提

開発環境

  • Ruby 2.2.3
  • Rails 4.2.5

やったこと

  1. Railsの Action Mailer Previews を使ってプレビューを見ながらHTMLメールを作成
  2. このとき、roadie-railsを使っているので、view(.html.erb)とCSS(.scss)は別ファイルで管理
  3. 実際に配信してみる
  4. プレビューでは綺麗に見えてたのに、スタイルが崩れている

確かにプレビュー上では綺麗にスタイルが組まれていたものが、いざメールを送信してみるとスタイルが崩れてしまっていることに悩まされました。

原因と対策

原因

一番ネックなのが、メールクライアント毎にCSSの挙動が異なるということです。

詳細は下記にまとまっているようですが、各メーラーによって対応していないStyleがあります。
The Ultimate Guide to CSS
例えば、

  • postion: absolute が効かない
  • <head> <body> に指定したスタイルが効かない
  • <a> の色を指定しても効かない

など、キリがなくてうんざりします。

対策

ちょっとググったら出てくる情報だと思いますが改めて、下記に注意する必要があります。

画像のpathなどは絶対path(http://, https://)で記載する

当然なんですが、メールは外部からリソースを読み込みますので、絶対pathで記載しないと表示されません。

テーブルレイアウトで組む

「何年前のコーディングの仕方だろう…」と嘆きながら組みました。
テーブルレイアウトなら、CSSが効かなかったとしても大きくスタイルが崩れることはなさそうです。
テーブルレイアウトの組み方はここが参考になります。

インライン要素の中にブロック要素を書かない

例えば、<a> タグの中に <table> とか入れちゃうと、Gmailで見たときにリンクが効かなくなります。

これが

<a href="hoge">
  <table>
    <tr>
      <td>ほげ</td>
    </tr>
  </table>
</a>

Gmailだとこうなってしまいました

<a href="hoge"></a>
<table>
  <tr>
    <td>ほげ</td>
  </tr>
</table>

CSSはインラインとして書く

先に上げた roadie-rails を使うと、外部ソースとして書いたCSSをインラインに変換してくれるので便利です。

実際に送って確認してみる(大事)

当たり前っちゃ当たり前(普通にWebサイト作ってても各ブラウザで確認しますよね)ですが、
各メールクライアントによって挙動が違うので、対象とするクライアントを決めた上で、各クライアントで表示が崩れないか確認するしかないでしょう。

明日の『LITALICO Advent Calendar 2016』は @takish さんの記事です。お楽しみに!

参考リンク

The Ultimate Guide to CSS
Outlookに勝てるHTMLメールコーディング vol.1「table構成編」
いまどきHTMLメールを作るにはどうするの?
初めてのHTMLメールコーディング

negi
LITALICOエンジニアマネージャー。 ITものづくり教室「LITALICOワンダー」での講師・教材作成、Webサービス「Conobie」「U2plus」の立ち上げから開発・運用を経験後、 「LITALICO発達ナビ」の立ち上げ、現在はマネジメントから開発、運用まで担当。プロジェクトマネジメントが好き。
litalico
「障害のない社会をつくる」というビジョンに向けて、社会の側にある障害をテクノロジーの力で取り除くことを目指す
http://litalico.co.jp/
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