notitie

日々感じたことをメモ書き

HTMLメールの作り方メモ

今回初めてHTMLメールを作る機会があったので、もし次回また制作する機会があった時用にメモを書き残しておく。

 

特に注意すること

  • テーブルレイアウトでコーディングする(2017年現在)
  • CSSはstyleを使えるメーラーもあるが、基本はインラインで記述する。インライン記述がめんどくさい場合はgulpでもできる(参考記事:

    メルマガをらくらくコーディング! gulp-inline-css – Web制作会社トライム

  • 画像は絶対パスで記述する(http://〜)
  • imgタグに display: block; を記述すること(Gmailで画像の上下に隙間ができるのを防ぐため)
  • 画像はpngではなくjpgで。
  • ファイルサイズを軽くするためにも画像は圧縮する。pngと書いているがjpgでもいける(

    TinyPNG – Compress PNG images while preserving transparency

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と宣言する
  • 文字コードは <meta http-equiv="content-type" content="text/html; charset=iso-2022-jp"> のように記述する
  • &は特殊文字なので「&amp;」と記述すること。それ以外の特殊文字は調べる

表示確認をする場合

putsmail.com

あまり信用しすぎるのは良くないが一応これで実機に飛ばして確認できる。

参考記事

あとは適当に記事を漁ったら大体理解できる。

HTMLメール作成メモ - Qiita

くずれないないHTMLメール - Qiita

HTMLメール作成で押さえておきたいポイント - satoyan419.com

まずはこれだけ!HTMLメールに関する技術的理解 | メルラボ