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

WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。

HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。

HTMLメール用のCSSリセットとテンプレート

normalize.email.css -GitHub

normalize.email.cssの特徴

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

normalize.email.cssの構成

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

  • normalize.css
    このCSSファイルは重要で、最初に記述します。
  • extra.css
    HTMLメールの一般的なバグに対応するためのスタイルシートです。
  • outlook.css
    outlookに有用なスタイルを提供するスタイルシートです。

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

normalize.email.cssを使用して、HTMLメールを作成する時のテンプレートです。

normalize.email.cssの中身

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

normalize.css

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

extra.css

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

outlook.css

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

top of page

©2017 coliss