Inboxの抄訳です。一通のメールレイアウトを綺麗にするために何時間もかかってしまい、イライラしたことはありませんか?この作業はとてもストレスの溜まるものですが、あなたのせいではありません。各メールクライアント(Gmail、Outlook、Yahoo!など)で表示できるHTML・CSSは違います。Gmailでは綺麗に表示できたとしても、Yahoo!では異なるレイアウトで表示されるといったことが起こり得ます。メールクライアントに加えて、ブラウザやレンダリングエンジン、メール転送サーバなどもレイアウトの表示に影響します。SendGridのメールサポートのエキスパート達は、メールクライアントやブラウザによらず意図した通りに表示するためのベストプラクティスを、下記の通り定めています。レイアウト使うべきタグと避けるべきタグを意識することで、メールクライアントによらず意図した通りのレイアウトが表示できます。paddingやmarginは使わない。インラインCSSを使う。br、hr、heightタグは使わない。全体のレイアウトを作成するときはtableを使う。doctypeを指定する。div”でリセットCSSを指定する。フォントはデバイスによって変化することがあるので注意する。多くのブラウザやメールクライアントでは、複雑なCSSのサポートが困難です。基本的なタグや昔から使われているタグを使用する。背景の色は常にリセットする。使う画像によって、表示のされ方は異なります。pngファイルは使わない。画像のサイズを指定する。alt属性を全ての画像につける。Outlookでは画像の周囲に余白が追加されてしまうことに注意する。floatプロパティは使わない。ビデオほとんどのメールクライアントはビデオレンダリングをサポートしていません。このベストプラクティスに沿ったHTMLを作成する方法を詳しく知りたい方は、以下の記事(英語)をご覧ください。DesignSendGridでは、HTMLメールを簡単に作成・編集できるツールをご用意しています。ご利用には会員登録が必要ですが、無期限・無料のプランもございます。会員登録はこちらから。下記のブログ記事では、SendGridのWeb画面上でHTMLメールの作成・編集ができる機能を紹介しています。ネタ翻訳アーカイブ2017年1月2016年12月2016年11月2016年10月2016年9月2016年8月2016年7月2016年6月2016年5月2016年4月2016年3月2016年2月2016年1月2015年12月2015年11月2015年10月2015年9月2015年8月2015年7月2015年6月2015年5月2015年4月2015年3月2015年2月2015年1月2014年12月2014年11月2014年10月2014年9月2014年8月2014年7月2014年6月2014年5月2014年4月2014年3月2014年2月2014年1月2013年12月まずは無料ではじめるプランを見る。