HTMLメール用にインラインCSSに変換する

  • Updated: 2023.08.08
  • Published: 2023.07.27
  • 693views
  • CSS
  • HTML

概要

OutlookのレンダリングエンジンがEdgeになるみたいですが、まだまだ、テーブルコーディング、インラインCSSが主流でコーディングが面倒で悩まされます。

今回はメルマガのHTMLメール用のコーディングをする際に、埋め込みCSS(styleタグ内)でコーディングして、後からインラインCSSに変換します。


環境構築

node.jsで環境を構築します。

package.json

使用モジュールは下記になります。

  • fs …ファイル操作モジュール(HTML読み込み・保存)
  • juice …インラインCSS変換モジュール
{
  "name": "mail_mag_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node conv.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "fs": "^0.0.1-security",
    "juice": "^9.1.0"
  }
}

モジュールインストール

npm install

スクリプト

let fs = require('fs');
let juice = require('juice');

let source = fs.readFileSync('./htdocs/index1.html', 'utf-8');
let inlinecss = juice(source, {
  removeStyleTags: false,
  preserveImportant: true,
});

fs.writeFile('./htdocs/index.html', inlinecss, (err) => {
  if (err) throw err;
  console.log('正常に書き込みが完了しました');
});

オプションはドキュメントを確認ください。


変換

node conv.js

Github

https://github.com/hiron712/inline_css

コメントを投稿する

CAPTCHA


関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ