HTMLメール作成方法 2013年度版

仕事でたまにHTMLメールをつくることがあるのでメモ。

ところで、日本語でみんな何て呼んでるんでしょう?
HTMLメール? HTMLニュースレター? HTMLメールマガジン?

たまにってのがポイントで、よく作ってるとメモらなくても忘れないんだけど、
たまにだと、すぐ忘れて思わぬところでハマるものです。

さて、HTML5とCSS3でかっこいいHTMLメールつくっちゃうぜー。
と言いたいところなんですが、残念ながらHTMLメールの主流は未だテーブルレイアウト。。。

たまたま今日受け取ったのはこんな感じのやつ。

HTMLメール

OK. box-shadowとbox-roundedでContainer作って、、、
と行きたいところですが、実際のソースはこんな感じ。

HTMLメールのソース

思いっきりテーブルレイアウトですね。

 

ポイントまとめ

Photoshopスライス Fireworksでもいいけど。
書き出し(image&HTML)

ラップしているテーブルに追加 font-familyはお好みで。
style="font-family:sans-serif; border-collapse:collapse; border-spacing:0;"

全てのtd要素に下記を追加
font-size:0; line-height:0; padding:0; margin:0; border:0; vertical-align:top;

テキストを載せたいtdの画像を検索(画像を背景に敷く)
tdのスタイルに下記を追加
style="width:画像横サイズ; height画像縦サイズ; background-image:url(画像パス); background-repeat:no-repeat;"
tdの中のimgは削除

tdの中にp要素を追加してテキスト入力
p要素に下記スタイルを追加 font-sizeとline-heightはお好みで。
style="font-size:13px; color:#000; line-height:1.4em; padding:0; margin:0; height:画像の縦サイズ;"
※画像縦サイズを追加すること。

imageしか含んでいないtd要素の中のimage要素に下記を追加
style="display:block;"

【その他】
position:absoluteは使えない(Gmailでスタイルが消される)
ネガティブマージンは使えない(Gmailでスタイルが消される)

[googlead]

まぁ、どんなデザインをコーディングするかによりますが、
こんな感じでガッチガチにする必要があるようです。
慣れると、サクサクいきますが、
HTML5&CSS3のコーディングに慣れていると、ハイパー面倒くさいです。

ということで、コーディングを念頭に入れたHTMLメールのデザインをしたいものです。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた