マルチデバイス時代に対応したEメール、レスポンシブEメールデザインについてお送りする本連載。今回は、元なるHTMLにCSSを追加してレイアウトとデザインを整えます。
以下は、CSSを追加する前後のメール表示です。
元となるHTMLで表示したメール（左）とCSSを追加して表示されるメール（右）
ヘッダー、コンテンツ領域に追加するCSS
ヘッダー、コンテンツ領域にCSSを追加する前に、コンテンツ部分全体の横幅を580px、各table要素の横幅は100％を指定します。
コンテンツ領域の「見出しテキスト2」、フッター箇条書き部分、コピーライト部分それぞれの上に2emの余白をとります。
プレヘッダーテキストの文字サイズを13px、「見出しテキスト1」の下に0.5em、ヘッダーバナー写真の下に20pxの余白を入れます。
本文最初の1行目の文字サイズを20px、色をグレーにします。
ここまでの設定は以下のようになります。
■ヘッダー領域、コンテンツ領域に追加するCSS
.wrapper {
width: 580px;
}
.content {
width: 100%;
}
.spacing {
padding-top: 2em;
}
.preheader {
font-size: 13px;
}
.heading {
margin: 0 0 0.5em;
}
.header-banner {
padding-bottom: 20px;
}
.lead {
font-size: 20px;
color: #555;
}
フッター領域に追加するCSS
フッター領域に追加するCSSは、箇条書き部分の行間、文字サイズ、罫線などを指定し、コピーライト表記の文字サイズも指定します。
■フッター領域に追加するCSS
.footer-list {
margin: 0;
padding: 2em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
list-style: square inside;
font-size: 13px;
}
.footer-copyright {
font-size: 11px;
}
