[html]HTMLメールの組み方についてのメモとか

必要に駆られたのが不要になったけど念の為まとめる。

SNSが普及してなかった頃、メルマガにまだ力があった頃、ちょろっと触る機会があった。
ただのテキストだと味気がないからHTMLメールで構築して装飾してた。
だけどそんなに作ることもなく何年も経って、案件で久しぶりに作りそうになった。それは流れたんだけど、そういえばどんな感じでやってんだろうってことで調べた。

サンプルはそんなに無いんだけど共通点が結構あったんで、そこを抑えたらいいんでないかな。

基本的な考え方
構築について
参考

基本的な考え方

サイズは全て実数値で指定する。%も使えるんだろうけど、全部pxで決めちゃったほうが無難。
スマホで閲覧しても耐えられることを前提にして幅を決めて、それに合わせたフォントサイズやら画像サイズを決めていく感じ。レスポンシブ前提で作るのはめんどくさいしね。

<table>で組む。colspanとかを頑張るんじゃなくて、tableにtableを突っ込む力技系。2000年代くらいのLPが近いかもしれない。

画像はよくわからないんだけど、多分普通に挿入してるんだと思う。とりあえずで挿入するんじゃなくて、原寸で埋め込むことを前提にしてるっぽい。解像度の云々は無視。
background-imageも使ってる。枠になる要素の縦横を定めて、background-size: cover;を使えば上手いこと枠にあった状態で表示できる。

色指定は6桁全部記入する。#eeeじゃなくて#eeeeeeにする感じで、省略しない。大文字小文字は基にしなくていい。

「マルチパートメール」とやらにしたほうがいい。HMTLメールとテキストメールのニコイチだから、両環境に対応できる。

構築について

コンテンツをいきなり書くんじゃなくて、一番外側に枠を用意する。
背景色をつけたいなら必須だけど、そうじゃなくてもとりあえず仕込んでおけばいいって感じ。作法だと割り切るのがいいかも。

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="background-color: #eeeeee;"><tbody><tr><td>

<!-- コンテンツ -->

</td></tr></tbody></table>

画像に文字を入れて読ませたいなら大味にしたほうがいい。gmailアプリでしか確認してないけど、幅が画面に合った状態を100％として固定されてて、拡大したら文字も画像もボケる。WEBブラウザとはそこが違うんで注意したほうがいい。

とか色々書こうと思ったんだけど、どうなんでしょうね。
ネックは、凝りすぎると表示がおかしくなるってとこよね。

エディタあるっぽいからそれ使うのがいいのかもしれないような、でも実務的にそこまで求めるもんはないような。