テキスト周りの指定
本文と見出し、段落を設定していきます。
h1, h2, h3, h4, h5, h6セレクターで見出しの位置、h1～h5の各セレクターで見出しのフォントの大きさの設定です。
pセレクターでは、段落内の文字色を#333（濃いグレー）、フォントの大きさを17pxに指定しています。
■テキスト周りのCSS
h1, h2, h3, h4, h5, h6 {
margin: 0;
line-height: 1.1;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
p {
margin: 0 0 1em;
color: #333;
font-size: 17px;
line-height: 1.47;
}
コンテンツ領域
基本的なCSSの設定が終わったので、HTMLにテーブルレイアウトでコンテンツ領域（メール本文の領域）を加えます。
幅580pxのtable要素を中央揃えで配置し、セル内の余白cellpaddingは20px、セルとセルの間隔cellspacingは0pxです。
td要素に、実際のメール本文を記述します。
■コンテンツ領域のHTML
<table width="580" cellpadding="20" cellspacing="0" align="center" class="wrapper">
<tr>
<td>
<!-- ここにコンテンツを入れていきます -->
</td>
</tr>
</table>
ベースとなるHTMLのすべて
これまでのHTMLとCSSをまとめると以下のようになります。
■ベースの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>
<style type="text/css">
/* Basic 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;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
line-height: 1.1;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
p {
margin: 0 0 1em;
color: #333;
font-size: 17px;
line-height: 1.47;
}
/* Custom CSS */
</style>
</head>
<body>
<table width="580" cellpadding="20" cellspacing="0" align="center" class="wrapper">
<tr>
<td>
<!-- ここにコンテンツを入れていきます -->
</td>
</tr>
</table>
</body>
</html>
今回作成したHTMLをブラウザーで表示
※ ※ ※
次回は、ヘッダー、コンテンツ、フッターの各情報ブロックを挿入していきます。
『レスポンシブEメールデザイン』をもっと理解できる本
『レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方』（KADOKAWA刊）が1月16日発売になりました。「買う」「読む」「お店へ行く」など効果のあがるメールの考え方・作り方を基礎からまとめ、Retinaディスプレイできれいに見せる方法、Outlook対策など、現場のノウハウも盛り込みました。コピー＆ペーストで仕事に使える3種類のレスポンシブEメールテンプレートを用意。スマホやタブレットで電子書籍代わりに読める全文PDFのダウンロードも同時に提供しています。
※本連載は、『レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方』の内容を一部抜粋・改変したものです。
レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方
- 著者：こもりまさあき
- 価格：本体2,400円 (税別)
- 発売日：2014年1月16日
- 形態：A5型 (184ページ)
- ISBN：978-4-04-870668-1
- 発売：KADOKAWA
［著者プロフィール］
こもりまさあき
1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年、会社を退職しそのままフリーランスの道へ。DTPからWebサイトの企画・制作からサーバ管理、テクニカルライティングやセミナー講師として活動中。案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし。執筆多数。
目次
- 第1章 スマホ時代のメルマガの課題とレスポンシブEメール
- 1-1 そのメルマガ、本当に読まれていますか？
- 1-2 スマホ・タブレット時代のHTMLメールの課題
- 1-3 レスポンシブEメールデザインとは
- 1-4 海外の事例
- 第2章 レスポンシブEメールの基礎知識
- 2-1 設計時、実装時の考え方
- 2-2 レイアウトの基本はtable要素
- 2-3 HTMLメールのベースを整える
- 2-4 HTMLメールで使うCSS
- 第3章 ステップで学ぶレスポンシブEメールの作り方
- Step1 設計時、実装時の考え方
- Step2 CSSを適用する
- Step3 画像の挿入
- Step4 作成したメールの確認とOutlook対策
- 第4章 すぐに役立つオリジナルテンプレート
- 4-1 レスポンシブEメールの基本テンプレート
- 4-2 来店促進用レスポンシブEメールの基本テンプレート
- 4-3 イベント用レスポンシブEメールの基本テンプレート
- 第5章 レスポンシブEメールの効果測定
- 5-1 配信メールの効果測定方法
- 5-2 開封率、クリック率をGoogleアナリティクスで調べる
- 5-3 配信メールのA/Bテスト
