HTMLメールの作成は難しい
HTMLメールの作成は、通常のWebページと比較して非常に作りづらいものです。作成が困難な理由として、作成が非常に面倒であり、下記のような制約が多くある点にあります。
- 外部CSSが利用できない
- mediaqueryが利用できない
- 使用できないスタイル定義がある
- 文字サイズが端末によって異なり調整がしんどい
- Gmailのメール作成フォームにおいての作成はできない
などなど。mediaqueryが利用できないので、端末によりレイアウトが崩れやすいです。特に通常ページ制作で行う外部ファイルの読み込みがメールではできないので、CSSスタイル定義はすべてインラインで実施する必要があります。
外部CSSが利用不可
Gmailやメールクライアントソフトなど、外部ファイルの読み込みを許可しておらず、linkタグをもちいた外部CSSの読み込みができません。
また、Gmailは<head>タグと<body>タグの中に記述された<style>タグを削除してしまいます。
すべてのメールクライアントに対応するためには、スタイル定義をすべてインラインで記述する必要があります。
CSSインライン定義例）
<p style="color: #ffffff;font-size: 1.0em;text-align:
center;background:#333333;padding:12px 0;margin:0;">
HTMLメールの作成方法
</p>
デモ
HTMLメールの作成方法
インラインでの定義は、タグのstyle属性にスタイル定義を記述します。
mediaquery(メディアクエリ)が使用できない
メールクライアントソフトによって、<style>タグが削除されてしまうため、画面サイズでスタイル定義ができるmediaquery(メディアクエリ)の使用ができません。
PC、スマホ、タブレットと、各種サイズがあるものに対して、メディアクエリなしで表現しなければならないため、表現の自由度がかなりせまくなります。
PC、スマホ、タブレット等の端末それぞれに対し、どれで見ても閲覧が可能なデザインを作成する必要があります。
他セキュリティ等の関連によるHTMLメールでの制作事項
- javascript：読み込み時に実行されるスクリプトは使用不可
- objectタグ：文書に外部リソースを埋め込むタグ
- embedタグ：動画や音声などのデータをページに埋め込むタグ
- iframe：外部HTMLを読み込むタグ
これらは、メールを開いた際に、ユーザーが意図しない動作をさせることを防ぐために利用ができない仕様になっているメールクライアントソフトが大半です。
基本レイアウトはテーブルタグ<table>で作成する
ここではまず、基本的なレイアウトの作成について説明します。今後こまかな実装方法のtipsを掲載していきます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no">
<meta name="viewport" content="width=device-width">
<title>メールマガジンタイトル</title>
</head>
<body style="font-family: sans-serif;font-color: #333;text-align: center;margin: 0;-webkit-text-size-adjust: 100%;padding:0;margin:0;-webkit-font-smoothing: antialiased;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" id="wrapper">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:100%;max-width:600px;">
<tbody>
<tr>
<td>
<p style="width:100%; color: #ffffff;font-size: 1.0em;text-align: center;background:#333333;padding:12px 0;margin:0;">
HTMLメール作成方法
</p>
</td>
</tr>
<tr>
<td>
<p style="width:100%; color: #333;font-size: 1.0em;text-align: center;padding:12px 0;margin:0;">
HTMLメール作成方法に関する説明をします。
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
デモ
メディアクエリが使用できないため、全体のレイアウトはすべてtableタグで実装します。 <html>タグでDOCTYPEを宣言し、各種metaタグを記述します。 bodyタグのスタイル定義で、webkit-text-size-adjust:100% を指定し、端末によって文字サイズが変わらないようにしていします 。（効かない場合もあり） 中央のコンテンツの部分は、すべてtableタグでレイアウトを作成していきます。
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" id="wrapper">
ここでは、PC、タブレットで閲覧時に横幅が大きくならないように、max-width:600pxを指定しています。 tableタグのtdタグ内に、表示するテキスト等のコンテンツを記述します。
<td>
<p style="width:100%; color: #ffffff;font-size: 1.0em;text-align: center;background:#333333;padding:12px 0;margin:0;">
HTMLメール作成方法に関する説明をします。
</p>
</td>
文字サイズ、背景色等はpタグのインライン定義で記述します。 次回は全体の構成、画像の読み込み、見出し等を含めたHTMLメールの作成方法を説明します。 |