HTML Eメールのコード要件

HTMLがOracle EloquaおよびブラウザやEメール・クライアントで予期したとおりにレンダリングされるようにするには、EメールのHTMLを処理する場合に次のガイドラインを使用します。

HTMLの推奨事項

どのブラウザでもEメールが最適にレンダリングされるようにDOCTYPEを常に宣言します。HTMLのDOCTYPEは<!DOCTYPE html>です。たとえば、次はドキュメントがXHTML 1.0 Strictであることを宣言します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
標準に準拠したHTMLコードを記述します。たとえば、要素を正しくネストおよびクローズし、(<html>、<head>、<body>タグを使用した)正しいドキュメント構造を使用し、小文字の要素名、属性および値を使用するようにします。HTMLコードの検証に役立つ様々なツールおよびブラウザ・プラグインがあります。たとえば、W3Cでは無料のW3C Markup Validation Serviceを提供されています。
より複雑なレイアウトの場合は表を使用することをお薦めします。複雑なレイアウトに<div>タグを使用しても、多くのEメール・クライアントで機能しません。表を作成する場合は、タグ<table>、<tr>および<td>を使用して、正しいHTMLコード構造を使用するようにします。また、固定幅を使用して表をネストすると、Eメールが予期せずに異なる画面サイズで表示される原因となる可能性があります。Eメールを複数のブラウザおよび画面サイズでテストしてください。
多くのEメール・クライアントではデフォルトでイメージがブロックされます。このため、alt属性をイメージ・タグに含めます。Eメール・クライアントがイメージをブロックする場合は、イメージのかわりに次が表示されます。
<img height="390" width="580" src="your-image.jpg" alt="これは表示されるテキストです" />
絶対パスを使用して、イメージやスタイルシートなどを参照します。相対参照は使用しないでください。コンポーネント・ライブラリ内のファイルについては、アップロード後に絶対パスを取得できます。
アニメーションGIFおよびビデオをEメールに含めることができます。Litmusによるビデオ背景をEメールにコード化する方法の説明を参照してください。
<、>、&などの予約文字に留意してください。これらの文字はHTML言語を構成しています。これらをEメールのコンテンツに表示する場合は、エンティティ名または数字をかわりに使用する必要があります。たとえば、<、>および&とします。
動的コンテンツ、共有コンテンツおよび署名レイアウトはHTMLソース・コード・エディタで編集できません。これらのタイプのコンテンツを編集する場合は、Eメール・エディタの設計パネルを使用する必要があります。これらのコンテンツ・タイプの詳細は、コンポーネント・ライブラリを参照してください。
テキストまたは共有コンテンツ・セクション内で<html>、<head>または<body>タグを使用しないでください。標準に準拠しないHTMLコードが最後のEメールに作成されてしまう可能性があります。
JavaScriptの使用は避けてください。セキュリティ上の理由から、多くのEメール・クライアントでサポートされておらず、Oracle Eloquaでは、<script>タグを使用しようとすると、エラーが表示される場合があります。
Eメールでの<iframe>または<form>などの要素の使用は避けてください。ほとんどのEメール・クライアントでこれらはサポートされておらず、セキュリティ上の理由から、多くの場合ブロックされます。Oracle Eloquaでは、これらのタグをHTMLコードで使用しようとするとエラーが表示される場合があります。

CSSの推奨事項

CSSプロパティのサポートは、Eメール・クライアント間で異なります。CSS互換性チャートを使用して、何がサポートされているかを確認します。
CSSで<body>タグをターゲットにしないでください。
Oracle Eloquaでは、CSSを使用して、ソース・エディタでのコード・スタイルを設定します。このため、エディタでも使用されるCSSクラス名を使用する場合、Eメールが予期したとおりに表示されない場合があります。このCSS競合を回避できるように、次のクラス名はHTMLコードで使用しないでください。
- .body
- .elq-form
- .elq-form-ce
- .elq-responsive
- .hidden-border
- .inline-styled-view
- .main
- .overlays-active
- .sc-container-view
- .sc-view
- .sc-view.static-layout
- .sc-view-overflow
top、bottom、relative、absoluteなどの配置は、Eメール・クライアント間で予期したとおりに表示されない場合があります。Eメールの要素を配置するためのより信頼性の高い方法として表を使用します。

様々なブラウザで適切にレンダリングされるように、アプリケーションに含まれる次の基本的なOracle Eloqua CSSリセットとの互換性を確保します。

html {
  color:#000;
  background:#FFF;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
  margin:0;padding:0;
}
table {
  border-collapse:collapse;
  borderspacing:0;
}
fieldset,img {
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var,optgroup {
  font-style:inherit;
  font-weight:inherit;
}
del,ins {
  text-decoration:none;
}
caption,th {
  text-align:left;
}
input,button,textarea,select,optgroup,option {
  font-family:inherit;
  font-size:inherit;
  font-style:inherit;
  font-weight:inherit;
}
input,button,textarea,select {
  font-size:100%;
}

HTML Eメールのコード要件

HTMLの推奨事項

CSSの推奨事項

関連項目