今回は実務で作成してきたレスポンシブHTMLメールの作業における注意点を備忘録的意味合いをこめて記事にしたいと思います。
基本事項
- テーブルレイアウトで作成する（大前提）
- 画像へのパスはすべて絶対パス(HTML、CSS)
- 文字コードは「iso-2022-jp」が基本
- DOCTYPEは「HTML 4.01」
- スタイルの記述は必要最低限にする
どうやってレスポンシブ対応するか
スマホ閲覧時はhead内にstyleタグを記述し、メディアクエリを使用してスタイルを効かせます。
PCはインラインスタイルでタグに直接スタイルを記述します。
このままだとインラインスタイルが優先されるので、メディアクエリ内のプロパティには!importantが必須です。
画像中心の案件ではPCとSPのソースを完全に分けて1つのファイルに2ページ分のソースを記述する方式を採用しています。
この場合、ブレイクポイントでdisplay:block・none（表示・非表示）の切り替えが必須になります。
配信テストを行う場合
弊社では有料の配信ツールを導入しておらず、納品までは下記の流れとなります。
- 1.テストサーバーに画像とCSSファイルを置く
- 2.ソース内にある画像、CSSの読み込みをテストサーバーへのフルパス記述にする
- 3.Becky!でHTMLメールを作成※する
※Becky!にて新規メール→ツール→HTMLメールの作成→ソースの編集（右下アイコン）
使用するテキストエディタについて
HTMLメルマガ作成時は「秀丸」か「Dreamwearver」で制作すると日本語に関するバグが少なくて安全です。
※Sublime Textに日本語対応用のパッケージを入れてもバグることがあったので危険と考えています。
実務で発見したこと
基本的に「outlook」でバグが多いです。。
- ・font-familyをメイリオまたは特定のものに指定してしまうとfont-sizeにおける数値の関係なしにline-heightが完全に効かなくなる（outlook）
そのためfont-familyをメイリオ等特定のものに指定した場合、必ずline-heightを指定した要素に対して、mso-line-height-rule: exactly;を指定する必要がある。 - ・リンクパラメータ内「20160101」など日付を連想させるものや「000…」など電話番号を連想させるものは、Android端末Xperiaの標準メーラー「Eメールスマートプラグイン」ではテキストとしてソースが吐き出されたり、自動リンクが設定されて表示が崩れる。現状その回避方法はないので制作の際は注意する。
- ・Gmailはタグに直接styleをあてないと効かない。
- ・画像には、下記のようにボーダーをなくす指定、インラインでのvertical-align:bottomを使用。
※画像に隙間が発生するのを防ぐため
【記述例】<img src="IMAGES/spacer.gif" alt="" width="1" height="40" border="0" style="vertical-align:bottom;"> - ・tdに style=”font-size:0; と vertical-align:top; を入れるようにする。入れないとメーラー配信時に画像と画像の間に隙間が空いてしまう。下記のような書き方をすると、これまた隙間が空いてしまうので、詰めるようにする。
【記述例】<td> <img src～> - ・line-height:0;を入れると、画像の上縁が1px欠けることがある（特にoutlook）
しかし、line-height:0;無い事で逆に1px空いてしまうケースもあるので案件によって柔軟に使い分ける
参考にさせていただいたURLhttp://qiita.com/k-takam/items/9c19c3c7715be5e232cd
http://matome.naver.jp/odai/2138484596774522101
スポンサーリンク