email チュートリアル
電子メールを使い始める
サーチ…
備考
HTML電子メールは、HTML、CSSのサブセットを使用して、色、グラフィックス、テーブルの列、およびリンクを使用してWebページのような電子メールメッセージをフォーマットします。
役に立つリンク：
HTMLとプレーンテキスト
HTML電子メールは、HTML、CSSのサブセットを使用して、色、グラフィックス、テーブルの列、およびリンクを使用してWebページのような電子メールメッセージをフォーマットします。
電子メールを送信する際には、プレーンテキストとHTMLの両方を送信することが重要です。電子メールをマルチパートMIMEとして送信することで、これを行います。ほとんどの電子メールサービスプロバイダには、自動的にMIMEを構築するツールがあります。 HTMLバージョンに基づいてプレーンテキストバージョンを生成するものもあれば、 サードパーティツールもあります。
テキストのみのメールの例：
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Apple Watchの最近のリリースでは、新しいMIMEパートが登場しました： text/watch-html 。このコンテンツはApple Watch（およびこのMIMEタイプをサポートするその他のクライアント）にのみ表示されます。
メールクライアントとレンダリングエンジン
電子メールクライアントは、さまざまなレンダリングエンジンを使用してHTML電子メールをレンダリングします。
- Apple Mail、Mac用Outlook、Androidメール、iOS MailでWebKitを使用する
- Outlook 2000/02/03でInternet Explorer 6を使用する
- Outlook 2007/10/13はMicrosoft Wordを使用します
- Webクライアントはブラウザのそれぞれのエンジンを使用します（たとえば、SafariはWebKitを使用し、ChromeはBlinkを使用します）
一部のクライアントは独自のスタイルを自分の上に追加します（例：Gmailはすべての<td>フォントをfont-family: arial,sans-serif;メールのレンダリング方法に影響を与える可能性があります。
2016年以前は、すべてのGmail製品で<link>タグ、 <style>タグ内のすべてのCSS、およびインライン化されていない他のCSSは除外されていました。 2016年後半にGmailは、ほとんどの製品で<style>タグとメディアクエリをサポートし始めました。 2016年11月23日現在のアップデートを示します。
基本（テーブルとインラインCSS）
レイアウトのテーブル
HTML電子メールファイルの構造は、Webページの構造に似ています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
しかし、 <div>ベースのCSSレイアウトはウェブ上と同じように電子メールでは機能しません。主要な電子メールクライアントは、浮動小数点やフレックスボックスのようなものをサポートしていないか、あるいはさまざまな方法でそれを管理しています。 <div>は、さまざまなクライアント（特にOutlook）での配置とボックスモデルの問題もあります。 <div>のみを使用して電子メールをコード化する方法はいくつかありますが、レイアウトのためにテーブルを貼る方が安全です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
インラインCSS
スタイルをインラインで適用すると、スタイルよりも離れたスタイル（Webメールクライアントスタイルなど）よりも優先されます。また、CSSを頭や外部のCSSファイルから取り除く電子メールクライアントの周りにも機能します。インラインCSSは、すべての電子メールクライアントで一貫性のある表示を保証する最善の方法です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
CSSをインライン展開するためのオプションがいくつかあります：
- CSSインラインで書く
- エディタでローカルスニペットを使用する
- このような WebベースのCSSインライナーを使用する
- このようなプログラマティックな CSSインライナを使用する
- このようなビルドプロセスやテンプレート言語を使用する
- 電子メールサービスプロバイダがあなたのためにインライン展開を処理できるようにします（サポートしている場合）
すべての電子メールクライアント用の電子メールのコーディング
使用されたコーディング方法：ハイブリッド/スポンジ
divの電子メールで使用することはできません永遠に神話されています。 divを適切にレンダリングできる電子メールクライアント（Outlookとは異なります）があります。以下の例は、Gmailアプリ（まだ公開されていないアップデート）、サムスンのデバイス、およびメディアクエリを読み込まない他の電子メールクライアントで動作する電子メールのコーディング方法を示しています。
Outlookの条件文の紹介
Outlookの条件文は、電子メールのレンダリング、またはOutlookのフォールバックなどの特定のものを表示する場合に非常に便利です。
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
上記のコードは、Microsoft Outlook 9またはIE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
条件文のバージョンがリストされています。
ハイブリッド電子メールテンプレートの開始
各ステップは、基本的なHTML知識を持つ人が理解しやすいように説明されています。
最初に、ラッパー・テーブルから始めます。このラッパー・テーブルは、画面全体にわたって、そしてクラスのコンテナを使用しています。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
その後、最大幅を読み取れないヘッダーのCSSを読み取る電子メールクライアントのメディアクエリを追加します。メディアクエリはすべての画面を対象とし、コンテナーを700ピクセル幅で表示します。
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
次に、表（クラス・コンテナ付き）を幅700ピクセルに保つためのoutlook条件文を追加します。
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
上記のコードはテンプレートの見通しを700pxに保持するはずです。
今すぐ列のために。以下のコードでは、テンプレート上に350px幅の2つの等しい列が作成されます。
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
この後、あなたの想像力やデザイナーに限界があります。設計が完了したら、ワイヤーフレーミング段階に関与することが重要です。設計がコーディング段階に入ったら、驚きはありません。
注意：
- 網膜画像には、そのスタイルではなく要素レベルで設定された画像が必要です。<img src = "" width = "" ...
- インラインCSSを選択することもできますし、すべてのクライアントがCSSを頭でサポートしている場合にのみ、頭でCSSを選択することもできます。
