マルチデバイス時代に対応したEメール、レスポンシブEメールデザインについて解説する本連載。今回から、デバイス環境によって表示状態を切り替える、基本的なレスポンシブEメールのテンプレートを実際に作成します。
以下は、第5回で完成するレスポンシブEメールの基本テンプレート完成イメージです。
レスポンシブEメールの基本となるテンプレート完成イメージをブラウザー（左）とスマホ（右）で表示
HTMLメールの基本
HTMLメールは、テーブルレイアウトと呼ばれる手法で作ります。Webブラウザーと異なり、先進的な技術サポートが進んでいないメールクライアントでの表示を考えると、旧来のtable要素を用いたページレイアウトの手法が一般的です。
table要素の構造
HTMLメールで安心して使えるHTMLの要素（タグ）、CSSのプロパティは限定されています。メールクライアントによっては各種要素やプロパティをサポートしている場合もありますが、さまざまなメールクライアントで利用可能なユニバーサルなHTMLの要素、プロパティは以下のとおりです。
・HTML要素
| a | b | br | div | font | h1 | h2 | h3 | h4 |
| h5 | h6 | head | hr | img | label | li | ol | p |
| span | strong | table | td | th | tr | u | ul |
・CSSプロパティ
| background | background-color | border | border-bottom |
| border-bottom-color | border-bottom-style | border-bottom-width | border-color |
| border-left | border-left-color | border-left-style | border-left-width |
| border-right | border-right-color | border-right-style | border-right-width |
| border-style | border-top | border-top-color | border-width |
| color | display | font | font-family |
| font-size | font-style | font-variant | font-weight |
| height | letter-spacing | line-height | list-style-type |
| padding | padding-bottom | padding-left | padding-right |
| padding-top | table-layout | text-align | text-decoration |
| text-indent | text-transform | vertical-align | width |
Emailology - The Science of Looking Good in the Inbox
HTMLの冒頭
実際にメールのHTMLを作成しましょう。HTMLの冒頭の文章型宣言は「XHTML 1.0 Transitional」を指定し、HTMLページの始まりを宣言しています。
head要素では、文字コード、ページタイトル、viewportを設定しています。HTMLの文字コードは「UTF-8」、Webページのタイトルを表すtitle要素は、空（から）です。viewportの設定は横幅をデバイス幅に、初期拡大率は1.0の等倍です。
■HTML冒頭
<!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" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title></title>
基本書体、画像などのCSSを整える
head要素内に、「<style type="text/css" >」と「</style>」で囲まれたstyle要素を追加し、この中にCSSを記述して装飾を指示します。
bodyセレクターに、基本となる書体（sans-serifはゴシック体）や文字サイズを設定します。body要素のマージンや余白は0です。
tdセレクターの「border-collapse: collapse」は、table要素とtd要素のセルの区切り線を閉じる指定です。
table,tdセレクターの、「mso-table-lspace: 0」と「mso-tablerspace:0」は、Outlookの特定バージョンで引き起こされる問題を解決するおまじないです（Outlook: Your Best Worst Enemy for Responsive Emails）。
aセレクターは、リンクと判別できるようにtext-decorationプロパティで下線を入れてあります。
imgセレクターは、HTMLメールに画像を挿入するためのセレクターです。画像の高さは、メールクライアント側で自動調整します。画像の幅をHTMLのimg要素のwidth属性で指定するだけで、デバイスの表示領域が変わったときに画像の横幅を切り替えられます。「line-height: 1」指定は、画像に対する意図しないスペースができるのを防ぐために入れてあります。
a imgセレクターは、リンクが指定された画像を対象とします。この指定は、リンク付きの画像に意図しない罫線が付くのを防いでいます。
■基本書体、画像などのCSS
body {
font-family: sans-serif;
font-size: 17px;
padding: 0;
margin: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
a {
text-decoration: underline;
}
img {
border: 0 none;
height: auto;
line-height: 1;
outline: none;
text-decoration: none;
}
a img {
border: 0 none;
text-decoration: none;
}
