株式会社LITALICOでWebエンジニアをしています、 @negi です。
本記事は『LITALICO Advent Calendar 2016』5日目の記事となります!
HTMLメールをRailsのActionMailerを使って送る際に困ったこと、注意点について書こうと思います。
前提
開発環境
- Ruby 2.2.3
- Rails 4.2.5
やったこと
- Railsの Action Mailer Previews を使ってプレビューを見ながらHTMLメールを作成
- このとき、roadie-railsを使っているので、view(.html.erb)とCSS(.scss)は別ファイルで管理
- 実際に配信してみる
- プレビューでは綺麗に見えてたのに、スタイルが崩れている
確かにプレビュー上では綺麗にスタイルが組まれていたものが、いざメールを送信してみるとスタイルが崩れてしまっていることに悩まされました。
原因と対策
原因
一番ネックなのが、メールクライアント毎に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メールコーディング