GmailAppで送るメールにスタイルシートを適用する

2021-11-7

Google App Scriptsで送るメールにスタイルシートを適用する方法をまとめた．

結論

styleタグをheadタグで囲む．headタグで囲まないと無視される
V8ランタイムを有効にするとテンプレートリテラル（ヒアドキュメント）が使えて分かりやすい
style属性に記載しても可

作成例

スタイルシートのない版．「本文」の文字色は黒．

function myFunction() {
  GmailApp.sendEmail('foo@bar.co.jp', 'CSS Test', '', {htmlBody: '<p>本文</p>'}); //黒文字。
}

スタイルシートを記載する．headタグで囲んだstyleタグを記載する．「本文」の文字色は赤．

function myFunction() {
  GmailApp.sendEmail('foo@bar.co.jp', 'CSS Test', '', {htmlBody: '<head><style>p{color: red;}</style></head><p>本文</p>'}); //赤文字。
}

headタグで囲まないとスタイルシートは無視．「本文」の文字色は黒．

function myFunction() {
  GmailApp.sendEmail('foo@bar.co.jp', 'CSS Test', '', {htmlBody: '<style>p{color: red;}</style><p>本文</p>'}); //黒文字。
}

V8ランタイムを有効にしてテンプレートリテラル（ヒアドキュメント）を使う．「本文」の文字色は赤．

function myFunction() {
  const html=
`<head>
  <style>
    p{
      color: red;
    }
  </style>
</head>
<p>本文</p>`;
  GmailApp.sendEmail('foo@bar.co.jp', 'CSS Test', '', {htmlBody: html}); //赤文字。
}

style属性に記載しても可．

function myFunction() {
  GmailApp.sendEmail('foo@bar.co.jp', 'CSS Test', '', {htmlBody: '<p style="color: red">本文</p>'}); //赤文字。
}