このページの本文へ

MARKETING 今日から始めるレスポンシブEメールデザイン入門 ― 第2回

作って分かるHTMLメールの基本と使えるタグ/CSSまとめ

2015年01月29日 11時19分更新

こもりまさあき、Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

 マルチデバイス時代に対応したEメール、レスポンシブEメールデザインについて解説する本連載。今回から、デバイス環境によって表示状態を切り替える、基本的なレスポンシブEメールのテンプレートを実際に作成します。

 以下は、第5回で完成するレスポンシブEメールの基本テンプレート完成イメージです。

01.png 03.png
レスポンシブEメールの基本となるテンプレート完成イメージをブラウザー(左)とスマホ(右)で表示

HTMLメールの基本

 HTMLメールは、テーブルレイアウトと呼ばれる手法で作ります。Webブラウザーと異なり、先進的な技術サポートが進んでいないメールクライアントでの表示を考えると、旧来のtable要素を用いたページレイアウトの手法が一般的です。

02.png
table要素の構造

 HTMLメールで安心して使えるHTMLの要素(タグ)、CSSのプロパティは限定されています。メールクライアントによっては各種要素やプロパティをサポートしている場合もありますが、さまざまなメールクライアントで利用可能なユニバーサルなHTMLの要素、プロパティは以下のとおりです。

・HTML要素

abbrdivfonth1h2h3h4
h5h6headhrimglabelliolp
spanstrongtabletdthtruul 

・CSSプロパティ

backgroundbackground-colorborderborder-bottom
border-bottom-colorborder-bottom-styleborder-bottom-widthborder-color
border-leftborder-left-colorborder-left-styleborder-left-width
border-rightborder-right-colorborder-right-styleborder-right-width
border-styleborder-topborder-top-colorborder-width
colordisplayfontfont-family
font-sizefont-stylefont-variantfont-weight
heightletter-spacingline-heightlist-style-type
paddingpadding-bottompadding-leftpadding-right
padding-toptable-layouttext-aligntext-decoration
text-indenttext-transformvertical-alignwidth

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;
}
{
  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;
}

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング