くずれないない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」ではない。
注意する点は、３つです。
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","ＭＳ ゴシック",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","ＭＳ ゴシック",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