読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

HTMLメールコーディング(デザイン)でちょっと困ったこといくつか。

css

HTMLメール作成で困るのが、
メールクライアント(サービス)毎に対応しているCSSが違うこと…


スタイルはインラインで指定するとかtableレイアウトじゃなきゃダメとかいろいろあるんですが、
先日HTMLメールを作成した時に「これもダメなの?」という細かい問題に幾つか当たったのでメモ。

1. position:absolute;が使えない

画像なんかをposition:absoluteで自由に配置したい場合があったりするのですが、
yahooメールやGmailではtopやらrightやらでポジションを指定することができません。

2. marginが効かない

利用者の多いoutlook.comではまさかのmarginが効かない( ゚д゚)
paddingで無理やり対応しました。

3. rgbaで色指定できない

background-colorを透過させたかったのでrgbaで指定したところ、yahooメールで表示されませんでした…(outlookも?)
rgbaとは別にカラーコードでも指定して、少なくとも透過なしのカラーが表示されるようにしておきました。


こういう細かい話はいくらでもあるんですが、
重要なのはどのメールクライアントを対象にして、どこまでのデザイン崩れ?を許容するか決めることでしょうかね。



その他HTMLメールについて

補足1:対応表でなんとなくチェック

メールクライアント毎のわかりやすいCSS対応具合のまとめがありました!
Guide to CSS support in email | Campaign Monitor
Update may 2014って書いてありますけど現状だいたいあっているような気がします。


作り始める前にうっすら確認。

補足2:ターゲットとするメールクライアントを決める

どのメールクライアントで確認するかを決める。
サービスのアクセスログ?だったりメールアドレスのドメインなどから判断することになるでしょうか。

今回私は
gmail(web,スマホapp)
outlook(web)
・yahooメール(web,スマホapp)
で確認してました。

androidiphoneに最初から入ってるメールクライアント?は比較的CSSを理解してくれるぽい…
(あまり確認してません…)

補足3:レスポンシブHTMLメール

Gmailで対応できない(styleタグが無視される)のがつらい…

もしレスポンシブに作る場合、Gmailでどちらが表示されるのが良いかを考えて
モバイルファースト(スマホにあわせて作成→メディアクエリでPCに対応)にするかPCファースト(PCにあわせて作成→メディアクエリでスマホに対応)にするか決めるのがいいでしょうか。
(ユーザーの閲覧環境等で判断かな?)

Gmailでメディアクエリ使えるようになったら問題無さそうですけどね!