【Power Automate】メールの装飾をカスタマイズする方法【CSS】

メールをリッチに装飾したい。

メールの装飾をカスタマイズする方法は？

（方法１）アクションの装飾メニューを使う方法。

▲アクションのエディタに、いくつかの装飾用メニューがありますので、それを使って装飾が可能です。

（方法２）CSSを使う方法

outlookの「メール送信」アクションで送信するメールはHTMLメールなので、普通のWebサイトやHTMLと同じようにCSSを使って送信することができます。

CSSとは？
https://developer.mozilla.org/ja/docs/Web/CSS

どっちを使えばいいの？

どっちを使っても大丈夫ですが、CSSを使う方が表現できることが多いのと、動的コンテンツを使うこともできます。

HTMLメールのCSSを使う方法

「メールの送信」アクションでHTML入力モードに切り替える。

HTMLメールで使うCSSの例

フォントサイズを変更する

<style>
    p { 
        font-size: large;
    }
</style>

<p>こんにちは！テストメールだよ。</p>

フォントを太字（Bold）にする

<style>
    p { 
        font-weight: bold;
    }
</style>

<p>こんにちは！テストメールだよ。</p>

フォントカラーを変更する。

<style>
    p { 
        color: red;
    }
</style>

<p>こんにちは！テストメールだよ。</p>

▲色の指定は「red」「blue」などの定義された色名、#FFFFFFのような色コードで指定します。

フォントを設定する。

<style>
    * {font-family: "メイリオ","Meiryo","ＭＳ ゴシック",sans-serif; }
</style>

▲カンマで複数フォントを指定します。この例の場合、メイリオフォントを優先的に使いますが、メール受信者のメールクライアントにメイリオがなければMeirio、なければMS ゴシック、なければsans-serifで表示します。

テキストをリスト表示する。（番号付き）

<ol>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ol>

▲基本的なリストを表示する場合はHTMLタグだけで表現できるのでCSSは不要です。

テキストをリストを表示する。（箇条書き）

<ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ul>

テキストを中央寄せする。（センタリング）

<style>
    p { 
        text-align: center;
    }
</style>

<p>こんにちは！テストメールだよ。</p>

▲テキストは通常pタグを使うのが一般的かと思いますが、ｐタグにtext-align:centerします。

画像を中央寄せする。（センタリング）

<style>
    img { 
        display: block;
        margin: auto;
    }
</style>

<img src="画像パス">

▲imgタグはインライン要素なのでdisplayブロック要素に変換してから中央寄せすると楽です。mergin:auto;で左右のマージンを均等にすることによって結果的に中央寄せになります。

GmailなどのWebメールでCSSが効かないときは？

GmailなどでCSSが適用されない理由

GmailなどのWebメールクライアントではCSSが効かない場合があります。これはセキュリティ対策としてHTMLメール内に記述された<style></style>タグを無視するからです。

GmailなどでCSSを適用する方法

この対策としてインラインCSSという記述方式でCSSを書くとCSSを適用できることがあります。

インラインCSSとは、<style>タグの中にCSSをまとめて書くのではなく各HTMLタグひとつ一つの中にCSSを記述する書き方です。

メールでの「インラインCSS」と「styleタグを使ったCSS」の書き方の違い

styleタグCSS

<style>
    img { 
        width: 30%; 
    }
    p { 
        font-size: large;
        font-weight: bold;
        color: red;
    }
</style>

<img src="画像パス">
<p>こんにちは！テストメールだよ。</p>

インラインCSS

<img src="画像パス" width="30%">
<p style="font-size:large; font-weight: bold; color: red;">こんにちは！テストメールだよ。</p>

▲Gmailで開いたメールです。インラインCSSでフォントカラーや画像サイズを調整できました。

関連記事

Power Automateを使ってOneDriveの画像をメール本文に挿入する

Power Automateを使ってメール本文に表組する方法

▲Microsoft Lists（Microsoftリスト）のデータを使って、メール本文に表組みする方法。

PADを使ってメール本文にローカルPCの画像を表示する方法

まとめ

Power Automate学習教材

Microsoft 365/ Power Automate / Power Platform / Google Apps Script…