Webでいろいろできるようになった

メールもHTMLで送られてくることが増えた

HTMLメールも進化してる…？

表現力とか
開発のしやすさとか

残念ながら いまだガラケーと同じくらい

十数年くらい進化してない
Webの開発は現代に近いほど楽

どうして……

多くのメーラーはJSが使えない

マルウェア対策でブロックされがち
Gmailではxxx.jsを添付できない

いまのWebはコンポーネントの組み合わせで作られる

ReactとかVueとか
コンポーネントで開発がかなり楽になった

コンポーネントを組み合わせる部分はJS

メーラーではコンポーネントの組み合わせで開発ができない
つまり、昔ながらの方法でしかHTMLが書けない

CSSの読み込み方には3種類ある

1.外部読み込み形式2.埋め込み形式3.インライン形式

外部読み込み形式

CSS専用のファイルをリンクする方法
最も新しい形式、現在の主流
BootStrapなどのライブラリを利用できる

メーラーでブロックされる

埋め込み形式

HTMLドキュメントの<style>内にまとめて配置する方法
同じスタイルを複数個所に適用できる

メーラーでブロックされがち

インライン形式

HTMLドキュメントの各タグ内にいちいち記述する方法
ほとんどのメーラーに受け入れてもらえる！

いにしえの方法（最近の教材には「この方法はやめろ」って書いてる）
同じスタイルの場合でもそれぞれに記述する必要がある
冗長で文字数が多くなりがちでメンテしづらい

でも、このインライン形式で書くしかない

メーラーごとにCSSの対応が違う

HTMLメールの標準が決まってない
それぞれのメーラーが気の赴くままに対応している
新たに生まれたCSSに対応していない場合も多い

HTMLメールが出始めたころのCSSで書くと崩れにくい！

HTMLメールが出始めたころのCSS

テーブルレイアウト
角丸や影、半透明は画像で用意
レスポンシブ？なにそれ？

ガラケー向けのサイトも当時同じような環境でつくってた

頑張っていろんなCSSに対応しているメーラーもある

↑頑張ってる
　Apple Mail (macOS/iOS) : 188/202
　Outlook (macOS) : 181/202
　Mozilla Thunderbird (macOS) : 171/202
　Outlook (Android/iOS) : 138/202
　Outlook (Outlook.com) : 128/202
　Gmail (Desktop Webmail) : 116/202
　Yahoo! Mail (Desktop Webmail) : 114/202
　Yahoo! Mail (Android) : 94/202
　Gmail (Android) : 86/202
　Gmail (iOS) : 81/202
　Outlook (Windows 10 Mail) : 55/202
　Outlook (Windows) : 49/202
↓頑張ってない

GmailとWindows向けのOutlookがあんまり頑張ってないので
いにしえのCSSで書くしかないよね