style タグ内の CSS を Inline style に変換してくれる npm Juice が HTML メール作成に便利なのでご紹介します。

npm Juice で CSS を Inline style へ変換する

• GitHub: Automattic/juice: Juice inlines CSS stylesheets into your HTML source.

以下のような JavaScript コードを実行すると、

var juice = require('juice');
var result = juice("
");

result には 以下のような Inline style 化された HTML が格納されます。

ちなみに昔、Gmail には style タグを利用できませんでしたが、2016年10月からは利用できるようになっています。

• 公式デベロッパー向けページ: CSS Support  |  Gmail & Inbox Sender Resources  |  Google Developers
• Gmail がサポートする CSS プロパティ、メディアクエリ一覧: Gmail Supported CSS Properties & Media Queries  |  Gmail & Inbox Sender Resources  |  Google Developers

CSS → Inline Style 変換サイト

オンラインで style タグを Inline Style 化してくれるサイトも用意されています。

• Juice CSS Inliner Online

以上、HTML メール作成のために style タグを inlines CSS 化したい現場からお送りしました。