style タグ内の CSS を Inline style に変換する npm Juice が HTML メールに便利

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

npm | エヌピーエム

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

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

var juice = require('juice');
var result = juice("<style>div{color:red;}</style><div/>");

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

<div style="color: red;"></div>

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

CSS → Inline Style 変換サイト

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

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

関連記事