Prompt
HTMLメールとブラウザに表示する普通のHTMLの異なる点は？
HTMLメールとブラウザに表示する普通のHTMLは、互換性、レンダリング、サポートされる機能の点で大きく異なるよ。HTMLメールは、Webブラウザのように標準化されたレンダリング環境で表示されるわけじゃないから、多くの制約があるんだ。
1. レンダリングエンジンの違い
-
普通のHTML: Chrome, Firefox, SafariなどのWebブラウザのレンダリングエンジン（Blink, Gecko, WebKitなど）は、W3C（World Wide Web Consortium）やWHATWG（Web Hypertext Application Technology Working Group）といった標準団体が定めた最新の仕様に厳密に従って動作する。
-
HTMLメール: Outlook, Gmail, Apple Mailなどのメールクライアントは、独自のレンダリングエンジンを使用している。これらの多くは、昔のブラウザ（Internet Explorerなど）のレンダリングエンジンをベースにしていたり、HTMLの仕様を完全にサポートしていなかったりするんだ。
2. サポートされる機能の制約
HTMLメールは、セキュリティ上の理由や互換性の問題から、多くのモダンなWeb技術をサポートしていない。
| 機能 | HTMLメールでのサポート状況 |
|---|---|
| 外部CSS/JavaScript | 外部CSSは非推奨かサポートされていないことが多い。JavaScriptはほぼ完全にブロックされる。 |
| モダンなCSS | flexbox, grid, position: stickyなどのレイアウト機能は基本的に使えない。border-radiusのような簡単なプロパティもサポートにばらつきがある。 |
| 動画/音声 | videoタグやaudioタグはサポートされていないか、動作が不安定。 |
| フォーム | formタグはほとんど機能しない。 |
3. コーディングスタイルの違い
これらの制約があるため、HTMLメールのコーディングスタイルは、ブラウザ用のHTMLとは全く違うものになる。
-
インラインCSS: スタイルシートは外部ファイルや
<style>タグではなく、style=""属性としてHTML要素に直接記述することが推奨される。 -
テーブルレイアウト: CSSのモダンなレイアウト機能が使えないため、昔ながらの**
<table>タグを使ってレイアウトを構築**するのが一般的。 -
絶対パス: 画像などのリソースは、相対パスではなく
https://で始まる絶対URLで指定する必要がある。
結論として、HTMLメールは、どんな環境でも（例えばWebクライアント、デスクトップアプリ、モバイルアプリなど）確実に表示されることを最優先に設計されている。そのため、ブラウザが持つ高度な機能の多くを犠牲にしているんだ。