【HTML】HTMLメールの作り方

【HTML】
HTMLメールの作り方

送信前に、テスト送信先にテスト配信する時も、
同じ流れで、HTMLメールの作成をして送信する。
テスト配信で、問題がないかチェックは必須。
HTMLメールは、見えないコードが多いので、
良く表示されないHTMLメールなどを見かけることが多い。
「メールソフト」によって表示結果にばらつきがあったり、
「ブラウザ」「スマートフォン」など、
表示端末の違いも考慮に入れる必要があったりと、
細かな調整が必要にもなっている。

INDEX

■ HTMLメールの作り方
■ HTMLメールコーディングのポイント
■ 「Thunderbird」でHTMLメールを送信する方法

HTMLメールの作り方

「HTMLメール」は、Webページと同様に、
HTMLコードで内容を記述して、普通のメールとしてではなく、
「HTMLメール」と指定して送付することで、
メール文をWebページのように写真や装飾された文のようにして、
送付先にメールを送ることができる。

HTMLメールの書式は、HTMLのWebと同様に、HTMLコードを記述するが、
レイアウトの仕方は、HTML特有の「Table」タグを利用してのレイアウトになる。
メールソフトによって、HTMLメールの表示が異なっていたりするので、
どのメールソフトでも同じように表示されるように、
「Table」タグレイアウトでHTMLコードを記述することが推奨されている。

下記の「HTMLメールの書式」で記述したHTMLコードを、
「HTMLメール」に挿入してください。
HTMLコードの挿入方法は、メールソフトによって操作が異なるので、
各ソフトごとにご確認ください。

HTMLメールの書式

HTMLメールの構文

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLメールのタイトル</title>
</head>
<body>

HTMLメールの内容

</body>
</html>

「XHTML 1.0 Transitional」での書式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WiLL Mailで効率的にメルマガ配信する10のヒント</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

HTMLメールの内容

</body>
</html>

DOCTYPEを指定する

HTMLメールにするには、「HTML」を使用するための宣言「DOCTYPE」を指定する必要がある。

「HTML5」の【doctype】宣言

<!DOCTYPE html>

「HTML4.01 Strict」の【doctype】宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

「HTML4.01 Transitional」の【doctype】宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

「HTML4.01 Frameset」の【doctype】宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

「XHTML1.0 Strict」の【doctype】宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

「XHTML1.0 Transitional」の【doctype】宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

「XHTML1.0 Frameset」の【doctype】宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Back

HTMLメールコーディングのポイント

「HTMLメール」は、
「Web」「HP」のHTMLコードの記述とは、
だいぶ異なる部分があります。

・HTML属性とCSSでコーディングする
・基本的にテーブルレイアウトで構成する
・一般的なタグは使用しない（文章入力にも）
・CSSは埋め込み形式が一般的
・CSSのインライン式も良い
・「DIV」「P」タグなどのブロック要素は極力使用しない

などの点が、「HTMLメール」独自のHTMLコード記述方法になります。

「HTMLメール」独自のHTMLコード記述方法になる理由は、
メールソフトが、最新HTMLに準拠しているわけではないので、
表示が、メールソフトごとに差が出てきてしまいます。
その差をなくして、どのメールソフトや端末でも、
同じように表示されるように対応すると、
「HTMLメール」独自のHTMLコード記述方法になっています。

「HTMLメール」のコード記述は、「Table」タグレイアウトが基本です。
Webでは使用できる「colspan」属性などが利用できなかったりします。
「DIV」「P」タグも、挙動がメールソフトごとに異なるので、
あまり利用しないのがHTMLメールコードです。

「CSS」も、CSS外部ファイルに記述するのではなく、
「HTML」ファイルに「HTML」コードと一緒に記述するようになっています。

Back

「Thunderbird」でHTMLメールを送信する方法

送信前に、テスト送信先にテスト配信する時も、
同じ流れで、HTMLメールの作成をして送信する。
テスト配信で、問題がないかチェックは必須。
HTMLメールは、見えないコードが多いので、
良く表示されないHTMLメールなどを見かけることが多い。

「Thunderbird」でHTMLメールを作成・送信する手順

「Thunderbird」でHTMLを作成するには、メールの作成画面を開いて、
HTMLを挿入するには、
・メール作成画面を開く
↓
TOPメニューの「挿入」を選択
↓
「HTML」を選択。
↓
「HTML」挿入画面が出てくるので、
「HTMLメール」のHTMLコードを記述・コピーして「挿入」ボタンを選択。
↓
メール内容に「HTMLコード」の内容が表示されて、確認する。
↓
送信形式を「HTML」に変更するために、
TOPメニュー「オプション」を選択
↓
「送信形式」の「HTMLのみ」を選択。
↓
「送信先」「タイトル」を設定・確認する
↓
全ての内容を確認する
↓
「送信」ボタンを押して送信する
↓
完了

Back