← すべての記事
· 13分読了

メールでの CSS: 使えるものと使えないもの

HTML メールを CSS でスタイリングする現実。

メールでの CSS は、ブラウザの CSS の制約されたサブセットです。ウェブ開発で日常的に使うプロパティがメールクライアントで動作しない場合があります。このガイドでは、安全なもの、回避策が必要なもの、完全に避けるべきものを文書化しています。

CSS の制限をスキップしたい場合、Sequenzy のようなビジュアルビルダーが互換性のあるコードを自動生成します。しかし、メールでの CSS を理解することで、問題のデバッグと情報に基づいた決定ができます。

インライン vs 埋め込みスタイル

インラインスタイル（最も信頼性が高い）

<p style="color: #333333; font-size: 16px; line-height: 1.5;">
  Text with inline styles
</p>

インラインスタイルはすべてのメールクライアントで動作します。最高の特異性を持ち、削除されません。欠点：冗長なコードと、重複なしでの再利用不可。

埋め込みスタイル（head 内）

<head>
  <style>
    .text-body {
      color: #333333;
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p class="text-body">Text with class</p>
</body>

埋め込みスタイルはほとんどのクライアントで動作しますが、Gmail は特定のコンテキストで歴史的に削除します。拡張（メディアクエリ）には使用しますが、重要なスタイルには使用しないでください。

ベストプラクティス：両方

重要なレンダリングにはインラインスタイルを使用。メディアクエリとプログレッシブエンハンスメントには埋め込みスタイルを使用。CSS インライナーツールがこの変換を自動化します。

タイポグラフィ CSS

安全なフォントプロパティ

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold; /* or 700 */
font-style: italic;
color: #333333;
line-height: 1.5; /* or 24px */
text-align: left; /* center, right */
text-decoration: none; /* underline */
text-transform: uppercase; /* lowercase */
letter-spacing: 1px;

これらのプロパティはすべての主要クライアントでサポートされています。font-size には px 単位を使用（em/rem は信頼性が低い）。font-weight は normal (400) と bold (700) 以外の値を避けてください。

Web フォント

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

<p style="font-family: 'Roboto', Arial, sans-serif;">
  Custom font with fallback
</p>

Web フォントは Apple Mail、iOS、一部の Android クライアントで動作します。Gmail と Outlook はフォールバックを使用します。常に Web セーフなフォールバックを含めてください。

ボックスモデル CSS

パディング（テーブルセルで安全）

<td style="padding: 20px;">
  Content with padding
</td>

<!-- Or individual sides -->
<td style="padding-top: 20px; padding-bottom: 10px;">
  Content
</td>

テーブルセル上のパディングは信頼性が高いです。div や段落では結果が異なります。疑わしい場合はテーブルセルを使用してください。

マージン（注意して使用）

マージンは特に Outlook で一貫性がありません。コンテンツのマージンよりコンテナセルのパディングを優先してください。

<!-- Instead of margin on heading -->
<td style="padding-bottom: 20px;">
  <h1 style="margin: 0;">Heading</h1>
</td>

幅と高さ

width: 600px;
width: 100%;
max-width: 600px;
height: 200px; /* Avoid when possible */

幅は信頼性が高いです。max-width はレスポンシブメールで有用ですが、Outlook は無視します（Outlook 固定幅には条件付きコメントを使用）。高さはコンテンツが決定するため避けてください。

背景 CSS

背景色（安全）

background-color: #f5f5f5;
background: #f5f5f5; /* shorthand works too */

背景画像（複雑）

<!-- Works in most clients, NOT Outlook -->
<td style="background-image: url('image.jpg'); background-color: #333;">

<!-- For Outlook, use VML -->
<!--[if gte mso 9]>
<v:rect style="width:600px;height:300px;" stroke="false" fill="true">
<v:fill type="tile" src="image.jpg" />
<v:textbox>
<![endif]-->

<div style="background-image: url('image.jpg');">
  Content
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

背景画像は Outlook サポートのために VML が必要です。常に background-color のフォールバックを含めてください。

ボーダー CSS

実線ボーダー（安全）

border: 1px solid #cccccc;
border-bottom: 2px solid #333333;
border-top: none;

ボーダーラディウス（Outlook 不可）

border-radius: 4px; /* Ignored in Outlook */

border-radius はほとんどのクライアントで動作しますが、Outlook は四角い角を表示します。ボタンでは通常許容可能です。重要な丸角デザインには画像を使用してください。

レイアウト CSS

display プロパティ

display: block;
display: inline;
display: inline-block;
display: none;

基本的な display 値は動作します。display: flex と display: grid はメールで動作しません。レイアウトにはテーブルを使用してください。

位置指定（避ける）

CSS 位置指定（absolute, relative, fixed）は信頼性がありません。テーブルベースのレイアウトを使用してください。

フロート（避ける）

フロートは Outlook で信頼性がありません。横並びコンテンツにはテーブル列を使用してください。

メディアクエリ

@media screen and (max-width: 600px) {
  .mobile-full {
    width: 100% !important;
    display: block !important;
  }
  .mobile-hide {
    display: none !important;
  }
  .mobile-text-center {
    text-align: center !important;
  }
}

@media (prefers-color-scheme: dark) {
  .dark-bg {
    background-color: #1a1a1a !important;
  }
}

メディアクエリは Apple Mail、iOS、Gmail App で動作します。Outlook や Gmail web（信頼性なし）では動作しません。インラインスタイルを上書きするために !important を使用してください。

メール用 CSS リセット

<style>
  /* Prevent text size adjustment */
  body, table, td, p, a, li {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Remove table spacing */
  table, td {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }

  /* Remove image borders and gaps */
  img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    display: block;
    outline: none;
    text-decoration: none;
  }

  /* Reset body */
  body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

CSS インライン化

ツールが埋め込みスタイルをインラインスタイルに変換して信頼性を高めます：

  • Juice: CSS インライン化のための Node.js ライブラリ
  • Premailer: オンラインツールと gem
  • MJML: コンパイル時にインライン化を処理
  • Email builders: Sequenzy など自動インライン化

CSS 問題のデバッグ

  1. まずインラインスタイルを確認。 欠落または誤ったインラインスタイルが最も一般的な問題です。
  2. Outlook でテスト。 Outlook で CSS が動作すれば、どこでも動作する可能性が高いです。
  3. 簡略化。 問題が消えるまで CSS を削除し、徐々に追加。
  4. 特異性を確認。 インラインスタイルが埋め込みスタイルを上書きする可能性。

結論

メールでの CSS は制約された言語です。よくサポートされるプロパティに固執し、重要なレンダリングにはインラインスタイルを使用し、クライアント間でテストしてください。Sequenzy のようなフレームワークとビルダーがこれらの制約を自動処理します。

現代のウェブ CSS に慣れていると制限は苛立たしいです。しかし、それらを理解することで、受信者が使用するすべての奇妙なメールクライアントで一貫してレンダリングされるメールを構築できます。