Amazonからかなり凝っているHTMLメールが頻繁に届く.特にPrime Videoのが届いてよく開くのだが、結構綺麗にできてるなと感心している。
未だにTableタグだらけで記述しなきゃいけないのによくやる…
ってことでソースの中からいろいろ見つけた個人的に面白いなって思ったものをまとめた.
ただ自分のHTMLメール力かなり低いので、詳しい人には面白くないかも…
今回見たのは昨日着たメール.
よくできてる…
では自分が気になったことを羅列していきます.
1. 当たり前だけど、できるかぎり<head>の中でcssを定義
大分たくさんのCSSが使われているので、当然class定義している.外部のCSSファイルは読み込めないので、headの中に<style>で書いている.
2. そもそもHTMLメールってレスポンシブデザインできるんだ.
対応箇所は以下の最近追加された映画.まずは広いときはこんな感じ
そして狭くするとこんな感じ.
下の”>一覧へ”が実はレスポンシブで通常時は表示されていない.以下のような指定がされている.
3. これ画像なのかってやつ
再度以下のやつに登場してもらう.
この”—————“のような横線どうやって描いてるんだろう…って思って該当する文字列をさがしてたけど、これ画像だった.
background-imgで棒線を表示していて、その上に”「最近追加されたTV番組」”って出てきている.こういういろいろな工夫があって綺麗に見せてるんですね…
4. やっぱり幅/widthは全部実際の数値指定
全部の大きさをwidthで決めている.Table自体のwidthもheightもあらかじめ決めておく必要がある.(たぶん当たり前). ここでは横幅が640でそれぞれの動画のサムネイルの大きさが150ぐらいで指定されている.
5. 画像の周りにborderのような枠をつける
なぜかこの動画のサムネイルの周りの枠が二通りの方法で指定されている.
・一つは、普通にborder:1px solid #ffffff による指定
・もう一つは、親要素にbackground-colorで#ffffffとしてpadding:1pxを指定
これどういう効果があるんですかね?メールクライアントによっては崩れてしまうのを防いでいるのかな?
6. わざとテーブルを分割しといてレスポンシブルに見せかける
またここの話。これ実は、左の動画の二つで一つのtable,右の動画の二つで別のtableになっている.最初の想定では、4つとも同じtableからきているのかと思っていたけど違った.
恐らく推定でしかないけども、レスポンシブルにするためにこの二つを分けていると思う.
画面を狭くすると、以下のように2×2の状態に変化する…すごい…
おわりに
すごい。。。ソースコード見ると本当にやばい…でもこれ自動生成しているだろうから、実際にコードを書いているわけではないんだろうな.どういうツールがあるんだろ.
