くずれないないHTMLメール

  • 18
    いいね
  • 0
    コメント

くずれないないHTMLメール

レイアウト
使うべきタグと避けるべきタグを意識する.

・paddingやmarginは使わない。
・インラインCSSを使う。
・br、hr、heightタグは使わない。
・全体のレイアウトを作成するときはtableを使う。
・doctypeを指定する。
・”wrapper div”でリセットCSSを指定する。
・フォントはデバイスによって変化することがあるので注意する。

・基本的なタグや昔から使われているタグを使用する。
・背景の色は常にリセットする。

画像

・pngファイルは使わない。
・画像のサイズを指定する。
・alt属性を全ての画像につける。
・Outlookでは画像の周囲に余白が追加されてしまうことに注意する。
・floatプロパティは使わない。

どう作るか?テーブルレイアウトが基本

検証はさまざまなメーラーで

Outlook, Hotmail, Yahoo, Apple Mail, Thunderbird, Gmail・・・
・検証ツール
※Litmus
https://litmus.com/

モバイルファーストで構成自体をシンプルに1カラムで作る

便利ツール
今回はレスポンシブなHTMLメールが簡単に作成できる「BeeFree」というツール
https://beefree.io/

Responsive HTML Email Template -GitHub
https://github.com/leemunroe/html-email-template

ZURB
http://zurb.com/playground/responsive-email-templates

cssをインラインで記載してくれるジェネレーター
http://foundation.zurb.com/emails/inliner.html

Viewport Unit(ビューポートの単位)とは?
vw
ビューポートの幅のパーセント
vh
ビューポートの高さのパーセント
vmin
vwかvhの最小値
vmax
vwかvhの最大値

ここで指定した「3vw」は、320pxの幅(スマホ時)では文字のサイズが10px

ーーーーーーーーー
上記を含め後から困ったメモ
後でまとめて見やすく編集

文字コード
「SJIS」の設定って「ISO-2022-JP」のことかわからなかった。
「SJIS」つまり「Shift JIS」ではなくて、いわゆる「JIS」のことであり、「Shift JIS」ではない。

注意する点は、3つです。
HTMLは「HTML 4.01 Transitional」を使用する
文字コードは「iso-2022-jp」を使用する
画像などのパス指定はhttp://から記述する

文字コードを「iso-2022-jp」に改行コードを「CR+LF」

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Language"
    content="ja">
  <meta http-equiv="Content-Type"
    content="text/html; charset=iso-2022-jp">
  <title>[タイトルを記述]</title>
  <meta http-equiv="Content-Style-Type"
    content="text/css">
  <style type="text/css"><!--
    body{margin:0;padding:0;}
    [CSSを記述]
  --></style>
</head>
<body>
[コンテントを記述]
</body>

メールヘッダはHTMLメールの場合

Content-Type:text/html;
  charset=iso-2022-jp
Content-Transfer-Encoding:7bit
コード

テキスト形式のメールと一緒にHTMLメールを送信する場合
コード
Content-Type:multipart/alternative;
  charset=iso-2022-jp
Content-Transfer-Encoding:7bit

sublimeにしてtable作成が大変なのでジェネレーター使用
https://tabletag.net/ja/

tableに背景

<table bgcolor=""></table> <tr bgcolor=""></tr> <td bgcolor=""></td>

最終的に作ったソース
使用上、文字コード等は上記のとおりにできなかった。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes">
<meta http-equiv="Content-Language" content="ja">
<meta charset="shift_jis">
<title>タイトル</title>
<style type="text/css">
* { 
    margin:0;
    padding:0;
}
* { font-family: "メイリオ","Meiryo","MS ゴシック",sans-serif; }

img { 
    max-width: 100%; 
}

body {
    -webkit-text-size-adjust:100%; 
    width: 100%!important; 
    height: 100%;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width:100%; margin:0; padding:0; font-family:"メイリオ","Meiryo","MS ゴシック",sans-serif;">
<!-- HEADER -->
  <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin:0; padding:0;">
    <tr>
      <td>
        <img src="img_01.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/>
      </td>
    </tr>
  </table>
<!-- /HEADER -->
<!-- BODY -->
  <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width: 100%; margin:0; padding:0;">
    <tr>
      <td>
        <img src="img_02.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/><img src="img_03.jpg" alt="自分にあった優待を探す" style="width: 100%; margin:0; padding:0;"/>
      </td>
    </tr>
    <tr>
      <td>
        <a href="#"><img src="img_04.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/></a>
      </td>
    </tr>
  </table>

  <table border="0" cellpadding="0" cellspacing="0" bgcolor="#fad584" style="width: 100%; margin:0; padding:0;">
    <tr>
      <td>
        <img src="img_05.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;" />
      </td>
    </tr>
    <tr>
      <td>
        <a href="#"><img src="img_06.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/></a>
      </td>
    </tr>
    <tr>
      <td>
        <img src="img_07.jpg" alt="オルト" style="width:100%; margin:0; padding:0;" /><img src="img_11.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/>
      </td>
    </tr>
  </table>
<!-- /BODY -->
<!-- FOOTER -->
<div style="margin:0; padding:3%;">
  <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin:0; padding:0;">
    <tr>
      <td>
        <font style="font-weight: normal; font-size: 14px; font-size: 1.8vw; line-height: 1.6; color=#333;">てきすと
          <a href="#" style="color: #2972e2;">てきすと</a><br />
          てきすと
          <a href="#" style="color: #2972e2;">てきすと</a><br />てきすと<br />
        </font>
      </td>
    </tr>
  </table>
</div>
<!-- /FOOTER -->
</body>
</html>