Outlookメールのテーブルデザインを美しく変更する4つのCSS実装

Power Automateでメール送信すると、テーブルが地味すぎる…
デフォルトのテーブルはこんな感じ
CSSでデザインを変更する基本的な方法
パターン1: ヘッダーに色を入れたシンプルテーブル
パターン2: ストライプで強調したヘッダーテーブル
パターン3: 全体にボーダーを入れた定番テーブル
パターン4: ミニマルデザインテーブル
まとめ: 4つのデザインパターンを使い分けよう
デザインツールのご紹介

Power Automateでメール送信すると、テーブルが地味すぎる…

Power Automateでリストデータを取得して、そのままメールで送信したことはありませんか?「HTMLテーブルの作成」アクションを使えば簡単にデータを表形式にできますが、デフォルトのままだとデザインがかなり地味なんですよね。

実は、ちょっとしたCSSを追加するだけで、見違えるほど見やすいテーブルに変身させることができます。今回は、業務でそのまま使える4つのテーブルデザインパターンをご紹介します。

デフォルトのテーブルはこんな感じ

まず、何もデザインを当てていない状態だと、罫線も色もないシンプルすぎるテーブルが送信されてしまいます。これでは受信者にとって少し読みづらいかもしれません。

CSSでデザインを変更する基本的な方法

テーブルにデザインを当てる方法はいくつかありますが、一番シンプルなのはコード形式に変更してCSSを利用する方法です。

実際の手順としては、まずstyleタグを記載します。そして、このスタイルタグの間にCSS形式でデザインを記述していく流れになります。

@{body('HTML_テーブルの作成')}

<style>
  /* ここにCSSを記述 */
</style>

では、具体的にどんなデザインが作れるのか見ていきましょう。

パターン1: ヘッダーに色を入れたシンプルテーブル

最初にご紹介するのは、ヘッダーに背景色を入れただけのシンプルなデザインです。

@{body('HTML_テーブルの作成')}

<style>
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #4A90E2;
  color: white;
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
}

td {
  padding: 12px 15px;
  border-bottom: 1px solid #e0e0e0;
}

tr:hover {
  background: #f8f9fa;
}

</style>

ヘッダーに色を入れるだけでも、だいぶ見やすくなりますね。項目名が一目で分かるようになるので、データの可読性がぐっと向上します。

パターン2: ストライプで強調したヘッダーテーブル

2つ目は、さらに工夫を加えたデザインです。ヘッダーにストライプ(縞模様)を入れて、ヘッダー部分をより強調したスタイルになります。

@{body('HTML_テーブルの作成')}

<style>
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #2c3e50;
  color: white;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 3px solid #e74c3c;
}

td {
  padding: 12px 16px;
}

tr:nth-child(even) {
  background: #ecf0f1;
}

tr:hover {
  background: #d5dbdd;
}

</style>

視覚的なアクセントが増えることで、表全体の構造が把握しやすくなります。

パターン3: 全体にボーダーを入れた定番テーブル

3つ目のデザインは、テーブル全体にボーダー(罫線)を入れたスタイルです。

@{body('HTML_テーブルの作成')}

<style>
table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #34495e;
}

th {
  background: #34495e;
  color: white;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
}

td {
  padding: 12px 16px;
  border: 1px solid #bdc3c7;
}

tr:hover {
  background: #ecf0f1;
}
</style>

シンプルで見やすく、業務のメールでも使いやすいデザインではないでしょうか。セル同士の境界がはっきりするので、データの区切りが明確になります。

パターン4: ミニマルデザインテーブル

最後にご紹介するのは、余計な装飾を排除したミニマルなテーブルです。

@{body('HTML_テーブルの作成')}

<style>
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: transparent;
  color: #333;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid #333;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 1px;
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid #e0e0e0;
}

tr:hover {
  background: #fafafa;
}

tr:last-child td {
  border-bottom: 2px solid #333;
}
</style>

必要最小限の要素だけで構成されているので、スッキリとした印象を与えることができます。シンプルさを重視したい場合にぴったりですね。