Emailで送るためのHTML制作。とはいえPDFで提供されたデザインは一枚のグラフィック。テキストを入れる隙間もなく、画像をスライスしてテーブルレイアウトに配置し直すという、一昔前のweb制作を思い出すような作業になった。 CSSは極力使わないように…というものの、どうしてもGmailでに配置した画像周辺にスペースができてしまう。heightを設定しても、line-heightをゼロにしてもダメ。最終的に全てのimgタグに style="display:block;" を入れることで解決した。でもmargin:0;padding:0;の処理でもだ丈夫だと思うけれど確認していないのでわからない。

この仕事毎度忘れてしまうのでここでまとめておきます。

1. widthは800px以内もしくは90%以下設定でフレキシブルに
2. HTML テーブルレイアウトを使う。 pure CSS layoutsは使わない。
3. インラインCSS を使う。例）p style="color:#ccc;"
4. フォントはArial / Helvetica　など”safe”なフォントを使う
5. 画像はパブリック公開できるサーバーにアップデートしてリンク先を確保しフルURLを入れる。
6. tdタグには以下の情報を入れると余分なスペースでません。
   border="0", valign="top", align="left" (or center, if that suits the design), cellpadding="0", cellspacing="0"
7. background-imageは原則使わない。
8. unsubscribe をフッターに入れる　&91;&91;UNSUBSCRIBE&93;&93;

とりあえずこんなところ。後からまた追加するかもです。