tochio

レスポンシブ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のとき→左カラムに商品画像、右カラムに商品名・説明文・価格のテキストを配置
  • スマホのとき→商品画像の下に商品名・説明文・価格のテキストを配置

img_140820_01

これが通常のレスポンシブサイトであれば、左右のカラムに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を解除するのと同じような動きになります。

img_140820_02

テーブルレイアウトが主流だった頃も知っていますし、「display: ○○;」もよく使いますが、 こういうやり方もあるのかと、目から鱗でした。

メーラーのメディアクエリ対応状況もあり、レスポンシブ対応したHTMLメールが 現状でどれほどの効果があるかわかりませんが、 メディアクエリに対応したメーラーが増えていけば(特にGmailが対応すれば)、 レスポンシブHTMLメールを効果的に活用できるようになるのではないかと思います。

【参考サイト】

■HTMLメールの基本について

■レスポンシブHTMLメールについて

■レスポンシブHTMLメール テンプレート・フレームワーク

お問い合わせはこちら