HTMLメール：テーブルまたはdiv？
HTMLメールニュースレターのHTML/CSSは表形式である必要がありますか、それとも、メールクライアント間で適切に表示されることを保証するDIVを使用できますか？私はそれらがどのように行われているのかを確認するためにいくつかのテンプレートをダウンロードしましたが、それを基にして独自のテンプレートを作成し、それらはすべてテーブルを使用しているようです。
洞察力に感謝します、ありがとう！
HTMLを電子メールで送信する場合、Web開発のベストプラクティスはすべて適用されないことに注意してください。見た目を統一するには、次のことを行う必要があります。
- テーブルベースのレイアウトを使用する
- テーブルに旧式の属性スタイリングを使用する
- インラインスタイルのみを使用し、非常に単純なもののみを使用してください。
<style>-タグは多くのクライアントによって破棄されます。 <html>、<head>、および<body>を使用してスキップします-ほとんどのクライアントはいずれにしても破棄されます。- 画像を埋め込む場合は、画像が読み込まれていない場合でも、電子メールが適切に見えるようにしてください。多くのクライアントでは、画像を表示する前に、ユーザーが電子メールを「安全」としてマークする必要があります。
上記のポイントのより詳細なバージョンをここで読むことができます：
ここでみんなが言ったように、テーブルを使用してすべてのcssをインライン化してください...しかし、メールの作成を支援するメールアプリのエコシステムがあります。
私は最近使用したほとんどの電子メールのビルドに Mailrox （ https://www.mailrox.com/ ）を使用してきましたが、かなり良くて出力が完璧なようですベータ版であっても、デザインから作成する場合のHTMLメール。
Mailchimp または Campaign Monitor から事前に作成されたテンプレートを試すこともできますが、メールのデザインがあるようで、Mailroxが最適かもしれません。
本当にメールを作りたいなら、最新のウェブデザインとマスターテーブルのレイアウトについて知っていることのほとんどを忘れて、PatrikAkerstrandのリンクを使ってください。
Litmus は、ハンドコーディングされたデザインのテストにも最適です。すべてのメールクライアントでメールのプレビューを提供します。
お役に立てれば。
多くのメールクライアントはcssをレンダリングできません。私はあなたのメールをフォーマットするためにテーブルを使用し、他のものには画像を使用します。
既に述べたように、HTMLメールは（divではなく）テーブルを使用して作成する必要があります。 CSSを追加することもできます-両方とも外部スタイルシートを使用しますが、これはすべての電子メールクライアントによって選択されるわけではないため、実際にはCSSをインラインで追加する方が信頼性が高くなります。その場合でも、一部の属性は特定の電子メールクライアントによって無視される可能性があります。したがって、最善の策は、HTML属性が利用可能な場合は常にHTML属性を使用することです。 「Gmailなどの一部のクライアントは、タグの内容を無視または削除するか、無視するため、これを行う必要があります。」ソース： http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
それとは別に、私も試行錯誤を通して、画像でさえもあなたがメールに表示したい正確なサイズにトリミングしなければならないことを学びました。 Outlookの画像の幅/高さのHTML属性を取得するのがひどい場合、これらの属性が無視され、画像がフルサイズで表示されたために、いくつかの厄介な引き伸ばされた電子メールを見ました。