HTML メールの忘備録

自分の作業環境での話になるので、全ての環境で、とは行かない・参考にならないかもしれませんが、一応、自分の忘備録的に残しておきます。

HTML メールの基礎知識

• テーブルレイアウト
• CSS はインライン指定
  e.g. <span style="font-size:14px">
• メディアクエリーは <style> 要素内に記載

参考）HTMLメールを作る前に押さえるべき基本事項

HTML Attributes

• <table> ではなく <td> に width 属性を適用
  table では可変にならないが td だと可変、レスポンシブになる。

CSS Properties

• box-shadow - 適用されない物が多い
• width
  • max-width: 100% は Gmail だと謎の px 値に変換される
  • width: 100% は問題なし
• Negative Margin - Gmail で適用されない

• <img width="100%"> and img { max-width: 100% } と指定
  • 多種のメーラーで表示崩れを回避してると思われる

細かい挙動

@ outlook.live.com

• インライン要素同士は勝手に繋げられる
  ≒ 半角スペース除去
  e.g. <span /> <span /> → <span /><span />
• ブロック要素同士は勝手に離される
  ≒ display: inline 時などに半角スペース分あく
  e.g. <div /><div /> → <div /> <div />