メールのCSS：日本語メールで使える指定・使えない指定

表の読み方

最も目立つのは Outlook Windows の列で、× と △ が並びます。次に、Apple Mail は ○ がほぼ全部ですが、これは「Apple Mail で崩れなければ安全」を意味しません。むしろ最も寛容なクライアントなので、開発中の確認に使うと他で起きる崩れを見落とします。最後に △ の多さです。たとえば margin は、負の値が使えない、Outlook for Windows では auto が効かない、といった個別の制約が注記されています。△ は「使うな」ではなく「その用途を実機で確認せよ」という意味です。

日本語メールのフォント指定と行間

メールでは @font-face が Apple Mail と Samsung Email でしか効かず、Outlook for Windows では宣言を読むだけで外部フォントを無視します（caniemail.com）。そのため、日本語では端末にあるフォントを先頭から順に探させる指定が実質的な標準になります。macOS と iOS ならヒラギノ、Windows なら游ゴシックやメイリオを並べ、最後に sans-serif を置きます。日本語の Web フォントはファイルが大きくなりがちなので、メールで追いかける価値は低いと考えてよいでしょう。

行間は本文で1.7～1.8倍程度が読みやすいとされ、16pxの本文なら28px前後です。ただし line-height の項目には、Outlook for Windows で px や em の挙動が不安定で、mso-line-height-rule: exactly が回避策になると書かれています。font-size は px で指定してください。rem は Outlook for Windows と Yahoo!メールで使えません。

<td style="font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; font-size: 16px; line-height: 28px; mso-line-height-rule: exactly; color: #222222;">
  ご注文の商品を本日発送しました。お届け予定日は10月12日です。
</td>

折り返し、ふりがな、縦書き

日本語は単語の間に空白がないので、長い URL や英数字の列があると列幅からはみ出します。word-break は Gmail の Web と Outlook for Windows で対応、Gmail のアプリや Outlook.com、Apple Mail では一部対応、Yahoo!メールでは非対応です。注記には、Gmail の Web は30文字ごとに <wbr> を挿入すること、一部のクライアントでは break-all だけが効くことが書かれています。長い文字列は短縮 URL に置き換え、どうしても出す場合は次のように break-all を試してください。

<td style="font-size: 14px; line-height: 24px; word-break: break-all;">
  https://example.com/orders/2026-10-07/very-long-tracking-path
</td>

ふりがなに使う ruby要素は、Apple Mail、Outlook.com、Yahoo!メールでは対応する一方、Gmail の Web と iOS、Outlook for Windows では非対応です。Gmail の Android は Google 以外のアカウントに限った一部対応です。そのため、読みを補う必要のある語は本文中に括弧書きで添えるのが確実です。ruby を使う場合も、表示されないクライアントで意味が欠けない文面にしておきます。

<p style="font-size: 16px; line-height: 32px;">
  <ruby>締切<rt>しめきり</rt></ruby>は10月31日です。
</p>

縦書きの writing-mode は、Gmail の Web、Outlook.com、Apple Mail で対応、Gmail のアプリは一部対応、Outlook for Windows と Yahoo!メールは非対応です。縦書きを見せたい見出しは画像にして alt を付ける、という割り切りが現実的です。<html lang="ja"> のlang属性は、Gmail、Outlook、Apple Mailなど主要なクライアントで対応しています。Yahoo!メールは一部対応で、td要素には使えないという注記があるため、lang属性はhtml要素に付けてください。

inline style と style ブロックの使い分け

読みやすさを左右する指定（色、サイズ、行間、セルの余白）は inline に書きます。次の例のようになります。

<p style="margin: 0 0 16px 0; font-size: 16px; line-height: 28px; color: #222222;">
  お問い合わせありがとうございます。
</p>

head の style 要素は、Gmail では一部対応（Web版は16KBの上限あり）で、モバイルの Gmail Web は非対応です。Outlook for Windows では、style 要素を、その規則を使う要素より前に宣言する必要があります。メディアクエリのような「効かなくても読める」指定だけをここに置きます。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    @media screen and (max-width: 600px) {
      .col { display: block !important; width: 100% !important; }
    }
  </style>
</head>

ボタンは table のセルで作る

Outlook for Windows は border-radius を解釈せず、padding も table のセルでしか効きません。そこで、背景色はセルに持たせ、padding は中のリンクに持たせます。角丸は効かないクライアントで四角になるだけで、押せる範囲は変わりません。どうしても角丸にしたい場合、border-radius の項目が案内する VML の roundrect と buttons.cm を使います。

<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td bgcolor="#1d4ed8" style="background-color: #1d4ed8; border-radius: 6px;">
      <a href="https://example.com/orders/2210"
         style="display: inline-block; padding: 14px 28px; font-size: 16px; line-height: 20px; color: #ffffff; text-decoration: none;">
        注文を確認する
      </a>
    </td>
  </tr>
</table>

ウェブの書き方からメールの書き方への置き換え

ブラウザ向けの癖をそのまま持ち込むと、対応表の × と △ に当たります。置き換えの早見表を用意しました。

幅の指定は table と条件付きコメントで補う

Outlook for Windows では max-width が table 要素にしか効かず、width も div、p、img への CSS 指定は使えません (width の項目)。そこで、Outlook にだけ固定幅の table を見せる「ゴーストテーブル」を条件付きコメントで挟み、ほかのクライアントには max-width を持つ div を読ませます。画像の幅は CSS ではなく HTML の width 属性に px で書くのが安全です。width 属性 はほぼ全クライアントで対応で、Outlook for Windows のみ、パーセント指定と120dpi表示に不具合があります。

<!--[if mso]>
<table role="presentation" align="center" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
  <!-- 本文 -->
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

メディアクエリの対応状況と書き方

@media は Outlook for Windows で非対応、Gmail、Outlook.com、Yahoo! で一部対応、Apple Mail で対応です。注記によると、Gmail のアプリは Google 以外のアカウントで効かず、Outlook は入れ子のメディアクエリを取り除き、Yahoo! は screen と幅・高さの条件に限られます。したがって、狭い画面でも読める状態をデフォルトにして、メディアクエリは2列を縦に積むような改善に使います。

<style>
  @media screen and (max-width: 600px) {
    .col { display: block !important; width: 100% !important; }
  }
</style>

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td class="col" width="50%" valign="top" style="padding: 12px;">左の列</td>
    <td class="col" width="50%" valign="top" style="padding: 12px;">右の列</td>
  </tr>
</table>

背景画像は VML を併用する

background-image は Outlook for Windows で非対応で、項目には VML で背景画像を指定できると書かれています。次の形は、background 属性、CSS、Outlook だけに見える VML を重ねたものです。画像が読み込めなくても文字が読めるよう、bgcolor を必ず付けます。同じ項目には、URL つきの画像があると Gmail が style 属性ごと削除する事例も記載されているため、エディタのプレビューではなく届いたメールで確認してください。

<td background="https://example.com/img/header.jpg" bgcolor="#1e3a5f" width="600" valign="top"
    style="background-image: url('https://example.com/img/header.jpg'); background-color: #1e3a5f;">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:260px;">
    <v:fill type="tile" src="https://example.com/img/header.jpg" color="#1e3a5f" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding: 36px 28px; color: #ffffff;">画像の上に載せる見出し</div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

メール向けのリセット CSS

テンプレートによく入っている次のブロックは、クライアント固有の挙動を抑えるためのものです。文字サイズの自動調整、Outlook が table に足す余白、画像の枠線などが対象です。mso- と -ms- で始まる指定は Outlook や Windows 向けで、他のクライアントは無視します。

<style>
  body, table, td, p, a, li { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { border: 0; display: block; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  body { margin: 0; padding: 0; width: 100% !important; }
</style>

インライン化はツールに任せる

開発中は style ブロックに規則を書き、送る前にツールで各要素の style 属性へ写すのが現実的です。代表的なのは Node 用の Juice、オンラインツールや gem として知られる Premailer、そして MJML です。MJML では mj-style に inline="inline" を付けると、その規則がインライン化されます（MJML ドキュメント）。どのツールを使う場合も、最終的には配信サービス経由で届いた HTML を確認してください。

<mj-head>
  <mj-style inline="inline">
    .note a { color: #555555 !important; }
  </mj-style>
</mj-head>

崩れたときの確認順

1. どのクライアントで崩れたかを特定する: 上の表か caniemail.com で、その指定の対応状況を調べる。
2. 届いた HTML を開く: 作成時のソースではなく、受信側の HTML を確認する。配信サービスやクライアントが規則を削ったり書き換えたりしている場合がある。
3. 規則を1つずつ外す： 崩れが消えたら、代替の指定を付けて戻す。
4. 優先順位を確認する: inline style は style ブロックより強い。そのため上書き用のメディアクエリには !important を付ける。Gmail では小文字のみ有効、Outlook for Windows ではキーワードの前の空白で挙動が変わる。

色がクライアントごとに反転する問題は ダークモードの記事 で扱っています。確認するクライアントの組み合わせは クライアント互換性ガイド が参考になります。コードを自分で書かずに済ませたい場合は ビルダーの選び方 を見てください。