HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css

サイト構築 -CSS

Post on:2017年12月6日

normalize.email.cssの特徴

ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。
ネイティブプラットフォームのフォントスタイルを作成。
HTMLメールの一般的なバグに対応。
コメントを使用したスタイルの説明。

normalize.email.cssの構成

normalize.email.cssは、以下のファイルで構成されています。

normalize.css

このCSSファイルは重要で、最初に記述します。
extra.css

HTMLメールの一般的なバグに対応するためのスタイルシートです。
outlook.css

outlookに有用なスタイルを提供するスタイルシートです。

HTMLメールを作成する時のテンプレート

normalize.email.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">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- normalize.cssの中身はHTMLメールにインラインで記述する必要があります -->
    <link href="normalize.css" rel="stylesheet">
    <link href="extra.css" rel="stylesheet">
    <style>
        /* extra.cssの中身はここに記述 */
    </style>
    <!--[if (gte mso 9)|(IE)]>
        <link href="outlook.css" rel="stylesheet">
        /* outlook.cssの中身はここに記述 */
    <![endif]-->
    <!-- Android 4のメールクライアントの件名にこのテキストが表示されないようにするには、タイトル要素を空にしてください -->
    <title></title>
</head>

<body class="body">
    <div class="webkit">
        <!-- 幅が限定されている場合のコンテナの例 -->
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <!-- 要素はここに追加する -->
                <!-- <th></th> -->
                <!-- 中央にコンテナを揃える -->
                <th width="500" align="left">
                    <!-- コンテンツはここに記述 -->
                    <!-- 好きなHTMLを使用することができます -->
                </th>
                <th></th>
            </tr>
        </table>
    </div>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

/* extra.cssの中身はここに記述 */

</style>

<!--[if (gte mso 9)|(IE)]>

/* outlook.cssの中身はここに記述 */

<![endif]-->

</head>

<tr>

</th>

</tr>

</table>

</div>

</body>

</html>

normalize.email.cssの中身

normalize.email.cssを構成する3つのスタイルシートの中身です。

normalize.css

HTMLメールに最初に記述するスタイルシート。

/* Normalize.css */
/* Contents of this file must be inlined to your newsletter in production */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
li a,
p a {
  /* Set sexy underline styling for links except images */
  text-decoration: none;
  color: #2837b8 !important;
  border-bottom: #d3d6f0 1px solid;
}
h1 {
  /* Mail.ru <h1> font-size fix */
  font-size: 32px;
  margin-top: 0;
}
table {
  /* Null tables spaces */
  border-spacing: 0;
  border-collapse: collapse;
}
table td,
table th {
  padding: 0;
  font-weight: normal;
}
img {
  /* Flexible images fix + prevent any borders for images */
  max-width: 100%;
  border: 0;
  outline: 0;
}
ol,
ul {
  /* We don't touch horizontal margins to prevent hiding bullets in Oultook */
  margin-top: 1em;
  margin-bottom: 2em;
}
ol li,
ul li {
  line-height: 1.6em;
  margin: 0.5em 0;
}
p {
  line-height: 1.6em;
  margin: 1em 0;
}
span.code {
  /* Monospace emphasis for code examples */
  font-family: consolas, courier, monospace;
  color: grey;
}

/* Normalize.css */

/* Contents of this file must be inlined to your newsletter in production */

h1 a,

h2 a,

h3 a,

h4 a,

h5 a,

h6 a,

li a,

p a {

/* Set sexy underline styling for links except images */

text-decoration: none;

color: #2837b8 !important;

border-bottom: #d3d6f0 1px solid;

}

h1 {

/* Mail.ru <h1> font-size fix */

font-size: 32px;

margin-top: 0;

}

table {

/* Null tables spaces */

border-spacing: 0;

border-collapse: collapse;

}

table td,

table th {

padding: 0;

font-weight: normal;

}

img {

/* Flexible images fix + prevent any borders for images */

max-width: 100%;

border: 0;

outline: 0;

}

ol,

ul {

/* We don't touch horizontal margins to prevent hiding bullets in Oultook */

margin-top: 1em;

margin-bottom: 2em;

}

ol li,

ul li {

line-height: 1.6em;

margin: 0.5em 0;

}

p {

line-height: 1.6em;

margin: 1em 0;

}

span.code {

/* Monospace emphasis for code examples */

font-family: consolas, courier, monospace;

color: grey;

}

extra.css

HTMLメールの一般的なバグに対応するためのスタイルシート。

/* Extra.css */
/* Contents of this file must be placed between <style> tags in <head> of your newsletter in production */

@media screen and (max-width: 600px) {
  u + .body {
    /* iOS Gmail viewport fix */
    /* Make sure that your body element has .body class */
    width: 100vw !important;
  }
}
a[x-apple-data-detectors=true] {
  /* Set color inheritance fot auto-detected iOS links like date, time, etc */
  color: inherit !important;
  text-decoration: inherit !important;
}
body {
  /* Set native platform font styling */
  font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.webkit {
  /* Webkit and Microsoft font-size fix */
  width: 100%;
  table-layout: fixed;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Extra.css */

/* Contents of this file must be placed between <style> tags in <head> of your newsletter in production */

@media screen and (max-width: 600px) {

u + .body {

/* iOS Gmail viewport fix */

/* Make sure that your body element has .body class */

width: 100vw !important;

}

a[x-apple-data-detectors=true] {

/* Set color inheritance fot auto-detected iOS links like date, time, etc */

color: inherit !important;

text-decoration: inherit !important;

}

body {

/* Set native platform font styling */

font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

font-size: 16px;

}

.webkit {

/* Webkit and Microsoft font-size fix */

width: 100%;

table-layout: fixed;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

outlook.css

outlookに有用なスタイルを提供するスタイルシート。

/* Outlook.css */
/* Contents of this file must be placed between <style> tags with conditional comment in <head> of your newsletter in production */

body {
  /* Reset font styling. Useful when we links custom fonts to our newsletter */
  font-family: Helvetica, Arial, sans-serif;
}
a {
  /* Reset default links styling */
  color: #2837b8;
  text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
  /* Reset default headings margin */
  margin: .5em 0;
}
img {
  /* Scaled images fix */
  -ms-interpolation-mode: bicubic;
}
table {
  /* Null tables spaces */
  border-collapse: collapse;
}

/* Outlook.css */

/* Contents of this file must be placed between <style> tags with conditional comment in <head> of your newsletter in production */

body {

/* Reset font styling. Useful when we links custom fonts to our newsletter */

font-family: Helvetica, Arial, sans-serif;

}

a {

/* Reset default links styling */

color: #2837b8;

text-decoration: underline;

}

h1, h2, h3, h4, h5, h6 {

/* Reset default headings margin */

margin: .5em 0;

}

img {

/* Scaled images fix */

-ms-interpolation-mode: bicubic;

}

table {

/* Null tables spaces */

border-collapse: collapse;

}

HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css

normalize.email.cssの特徴

normalize.email.cssの構成

HTMLメールを作成する時のテンプレート

normalize.email.cssの中身

normalize.css

extra.css

outlook.css

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css

normalize.email.cssの特徴

normalize.email.cssの構成

HTMLメールを作成する時のテンプレート

normalize.email.cssの中身

normalize.css

extra.css

outlook.css

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info