いやはや、Gmail はこわいすな。
こんな経験は二度とごめんなので、備忘録として書いておくす。
HTMLメールの基本はテーブル組みですね。
フォトショップなどのデザインカンプをスライスして、テーブルを使ってがちがちに組みます。
注意すべきは改行。ソースに余計な改行があるとレイアウトが乱れてしまうことが多々あります。思い通りに行かない場合、まずは改行を取り払ってみましょう。
さて、Gmailだ。
なぜか画像テーブルの前後に余白が入る。
いろいろと調べた結果、テーブルのtdタグに下記の様にすると良いことがわかりました。
<td style="vertical-align:top;font-size:0;" width="764" height="100" >
まずは「vertical-align」で縦方向の位置を決める。デフォルトだとダメっぽいす。
次にフォントサイズを0にする。フォントがなくても影響するみたいす。
最後に、中に入れる画像のサイズに合わせて、tdにもサイズを入れる。
スタイルですが、Gmailでは、headの中に書かれたことは無視されるようなので、必ずタグに直接埋め込んでください。
以上で綺麗に整うかと思います。
※iPhoneのメールではちょいとくずれました。しかし原因はわからず。
次回の課題とします。
みなさんもがんばろうすー(´▽`)ノ
関係ないけど、宣伝。
うちの会社の先輩が外苑前にお店を出したのですが、そのオンラインショップが昨晩オープンしました！
東ヨーロッパの温泉地チェコのプラハにあるMANUFAKTURA（マヌファクトゥーラ）のホームスパグッズを購入できます！
ビールやワインから作られたシャンプーや、死海のバスソルトなど、ちょいと珍しいものがありますので、お暇な方はひと目ごらんあれ(´▽`)ノ
