HTML
mail

くずれないないHTMLメール

くずれないないHTMLメール

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

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

・基本的なタグや昔から使われているタグを使用する。
・背景の色は常にリセットする。
https://sendgrid.kke.co.jp/blog/?p=2223

画像

・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>

https://blog.kannart.co.jp/coding/1093/
https://qiita.com/drasky1132/items/7beb80589ae1cef7f5e6