レスポンシブHTMLメールを作成する際の覚書

レスポンシブHTMLメールを作成することがあったので、覚書です。おもに「テーブルレイアウトで、PCの時には横並びのカラムを、スマホの時には縦並びにする」方法についてです。

普段、あまりHTMLメールを作成することがない方もいらっしゃるかと思いますので、まず、HTMLメールを作成する際の大前提を。
だいたい以下のような感じです。

テーブルレイアウト Outlook（2007/2010/2013）がfloatに対応していないなど、メーラーによって、CSSのサポート状況にばらつきがあります。多種多様なメーラーでレイアウト崩れを起こさないためには、テーブルレイアウトが基本です（今更感はありますが）。 ※主要メーラーのCSSサポート状況は以下で確認できます。 Guide to CSS support in email | Campaign Monitor
CSSはインラインで記述 Gmailをはじめ、主なWebメーラーは、head内に記述されたCSSを認識しません。ソースが冗長になってしまいますが、すべてstyle属性で記述します。
画像は絶対パスで記述絶対パスでないと、受信した際にユーザーが画像を読み込めません。
画像に対して、style属性で「display:block;」を追加 Gmailで画像の周囲に余白ができるのを防ぐため、こちらの記述を入れておきます。

通常のサイト制作よりも、できることの幅は狭いと思ったほうがいいでしょう。上記を踏まえたうえで、HTMLメールをレスポンシブ対応すると、さらにできることが制限されます。一番大きな制限は、

スマホのメーラーの中には、メディアクエリに対応していないものがある

ということではないでしょうか。

多くの人が利用しているGmailは、Webメール・アプリともにメディアクエリに対応していません。通常のレスポンシブサイトの場合、メディアクエリ非対応ブラウザに対しては「css3-mediaqueries.js」を読み込ませるなどして、メディアクエリに対応させることが可能ですが、今回はHTMLメールですので、そういった方法は取りません。

「メディアクエリに対応していない＝レスポンシブしない」と捉え、 Gmailほか、メディアクエリ非対応のメーラーでは、「スマホ用のレイアウトではなく、PC用のレイアウトが崩れることなく見えていればOK」とします。

メディアクエリ対応メーラーには、スマホ用のレイアウトを見せるようにしたいので、 style属性の中に、メディアクエリで記述していきます。（以下のコンテンツ幅は仮に設定しています） ※実際には、細かいレイアウト調整のために、複数のメディアクエリの設定が必要になります。

@media screen and (max-device-width: 650px), screen and (max-width: 650px) {
ここにCSSを記述
}

画像を親要素に対して幅100％で表示する場合は、通常のレスポンシブサイトと同じように、画像に以下のようなclassを付与することで実装できます。

@media screen and (max-device-width: 650px), screen and (max-width: 650px) {
 img[class="fix"] {
        width: 100% !important;
     max-width: 100% !important;
     height: auto !important;
    }
}

では、以下のようにしたい場合はどうすればいいのでしょうか。

PCのとき→左カラムに商品画像、右カラムに商品名・説明文・価格のテキストを配置
スマホのとき→商品画像の下に商品名・説明文・価格のテキストを配置

これが通常のレスポンシブサイトであれば、左右のカラムにclass名をつけ、そのclassに対して、「PCのときはfloatする」「スマホのときはfloatを解除する」という記述をすることで簡単に実装できますが、これはテーブルでレイアウトしています。実装できる方法を探していた時に見つけたのが、テーブルレイアウトで作成されたレスポンシブHTMLメールフレームワーク「Cerberus」なのですが、こちらで使われていたのが、なかなかいい方法だったので、ご紹介します。

まず、メディアクエリ内に「fluid」というclassの設定を記述します。

@media screen and (max-device-width: 650px), screen and (max-width: 650px) {
  td[class="fluid"]{
        display: block !important;
      width: 100% !important;
     clear: both;
    }
}

次に、スマホの時は縦並びにしたいtdに、上記で作成した「fluid」というclass名をつけます。

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="fluid" width="50%">画像</td>
        <td class="fluid" width="50%">テキスト</td>
    </tr>
</table>

こうすることにより、コンテンツ幅が650px以上のPCで見るときは、 tableタグに直接書かれた数値が優先されるので、左右のカラムはそれぞれ50％で横並びになります。

コンテンツ幅がメディアクエリで設定した650pxより小さくなると、メディアクエリに対応したメーラーでは、メディアクエリ内の記述が優先されるため、「fluid」というclass名のつけられたtdは、自分自身を「ブロック要素」「幅100％」と認識します。

「幅100％」となった左カラムに弾き出された右カラムは下に落ち、左カラムの下で、同じように「幅100％」のボックスを形成するようになるので、 floatを解除するのと同じような動きになります。