小金井にあるWEB制作会社の備忘録

MEMORANDUM

メディアクエリを使ってレスポンシブ対応したHTMLメールを作成

  • 公開日：2020-11-21
  • 最終更新日：2020-11-22

パソコンとスマホ用にメディアクエリを使用してレスポンシブ対応のHTMLメールを作成する機会があったので、制作時に気付けた点をメモ。

HTMLはテーブルレイアウトで作成する。

受信環境（メーラー）によって使用できるCSSの種類が異なるため、2カラムをCSSで実装できるものとできないもがある。

全てのメーラーで同じ表現にする場合はテーブルタグを入れ込状にして使用する「テーブルレイアウト」を使用するのが確実。

CSSは「style」を使ってHTMLタグに書く。

CSSの外部読み込みはもちろん、一部のメーラーではインラインで設定したCSSが効かない場合も。
基本的には「style」やHTMLタグが保有している属性を使って直にHTMLタグに設定していくのが安全。

メーラーによってメディアクエリの効かない環境がある。

PCのOutlook、スマートフォンのGmailアプリはCSSのメディアクエリが効かない。（Gmailアプリに関しては「メッセージ全体を見る」ボタンを押さなければ有効。）
そのため原則としてPC版の表示を基準に作成し、スマートフォン（タブレット）にのみ適応するところを、メディアクエリを使用して制作する方法をとる必要がある。

また、Outlookに関しては、下記のタグを使用することで、他のメーラーでは表示させない方法をとることもできる。

HTML

<!--[if gte mso 9]>
＝＝＝＝outlookのみ対応＝＝＝＝
<![endif]-->

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no, address=no, email=no, date=no, url=no">
<title>レスポンシブ対応したHTMLメールのサンプルソースコード｜株式会社衆</title>
<style>
body {
	font-size: 90%;
}
@media screen and (max-width: 480px) {
	.tbl {
		width: 90% !important;
		margin: 0 5% !important;
		border-collapse: separate;
		border-spacing: 5vw !important;
	}
	.tbl__cell {
		display: block !important;
		width: 100% !important;
	}
	.padding_top {
		padding-top: 5vw !important;
	}
}
</style>
</head>
<body style="background-color: #f5f5f5; margin: 0; padding: 0;">
<table width="650" border="0" cellpadding="0" cellspacing="25" bgcolor="#ffffff" style="margin: 0 auto;" class="tbl">
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td style="width: 48%; padding: 0 1%" valign="top" class="tbl__cell">
                        <p style="margin: 0 0 10px;">こんにちは、「株式会社衆」メルマガ担当の○○○○です。<br>
                        いつも弊社の備忘録（ブログ）をご覧頂きありがとうございます。</p>
                        <p style="margin: 0 0 10px;">衆では「HTMLメール」の参考になればと考え、弊社ブログをご覧頂いている方限定でこちらのソースを公開しています。</p>
                        <p style="margin: 0;"><strong>レスポンシブ対応したHTMLメールを作成</strong>される際に、こちらの<strong style="color: #FD5B3E;">ソースコード</strong>がお役に立ちますと幸いです。</p>
                    </td>
                    <td style="width: 48%; padding: 0 1%" valign="top" class="tbl__cell padding_top"><img src="○○○○" width="100%"></td>
                </tr>
            
            </table>
        
        </td>
    </tr>
</table>
</body>
</html>

送信環境にも左右される？

同じHTMLを使用しても送信環境（メーラー）によって正しく送信されない場合もあるようです。
たまたま、異なるメーラーを使用してメール配信テストをした際に、同じ内容なのに異なる表示がされたことがあったので一応追記。
メール作成の手順もあるので、再度検証は必要。

送信環境（メーラー）結果状態
Outlook×メディアクエリが正しく機能しなかった。
Becky〇

同一カテゴリーの記事