【メルマガ制作におけるHTMLメール】その2 HTMLの作り方
はいさいーー
みなさんー、こんにちは！
じぃでごわす。
メルマガ制作におけるHTMLメールの連載をしていますが、
前回は、メルマガの現状、種類、環境をお伝えしました。
今回は第2弾で、HTMLメールの作り方を書いていきたいと思います！
テーブルコーディング
HTMLメールはいにしえの「テーブルコーディング」で対応します。
そもそも、cssで横並びで使用していたfloatなどは効くのと効かないのがあり、今では便利なflexで横並びなどは論外です。笑
また、HTML5からでてきたsectionタグなどをサポートしていない場合もあるので、
テーブルレイアウトを許容してくれる「HTML4.01」での記述になります。
HTML4.01のdoctype宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">また、「テーブルコーディング」で組んでいきますので、要素を横に並べる際は、
・table内に2カラムのテーブルを入れる
という入れ子構造でレイアウトを組んでいきます。
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color: #666">
<tr>
<td align="left" style="padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="290" align="left" valign="top" style="background-color: #cccccc">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle"
style="color:#333333; font-size:14px; mso-line-height-rule:exactly; line-height:22px;">
2カラムテキスト2カラムテキスト2カラムテキスト2カラムテキスト</td>
</tr>
</table>
</td>
<!-- space -->
<td width="20"> </td>
<!-- //space -->
<td width="290" align="left" valign="top" style="background-color: #cccccc">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle"
style="color:#333333; font-size:14px; mso-line-height-rule:exactly; line-height:22px;">
2カラムテキスト2カラムテキスト2カラムテキスト2カラムテキスト</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>このようにガチガチに組んでいかないと、崩れが起こったりし大変になるからです。笑
tableタグにつけている、
border="0" cellpadding="0" cellspacing="0"この属性はtableタグがもともと持っている、余白を完全に0にするために設定しています。
このように明示的にゼロにする設定をしてあげないと、勝手に余白をレンダリングしてしまうことがあるからです。
また、テーブル間の余白を取りたい際は、marginよりもpaddingで取ったほうが、メーラーでの差異が少ないので、padddingで取ることをおすすめします。
style属性によるcss設定
WEBページですと、headタグ内にlinkタグを配置し、cssを読み込ませるのが一般的ですが、HTMLメールはそれができないと思ってもらってよいです。
そのため、
・cssはhead内にstyleタグで記述
・tableの各タグにstyle属性で記述
のどちらかで対応します。
<!-- styleタグで記述する場合 -->
<title>dummy.html</title>
<style>
body {
padding:0;
margin:0;
background-color:#ffffff;
}
</style><!-- style属性で記述する場合 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" valign="middle" align="left" style="padding:8px; color:#333333; font-size:18px; font-weight:bold; mso-line-height-rule:exactly; line-height:23px;">見出し</td>
</tr>
</table>
</td>
</tr>
</table>ここで注意点は、このような記述にしたからと言って、すべてのcssが効くわけではありません。
少し前は「このcssが効くのか？」というのを調べながらやっていたのですが、今は以下のようにcssが効くかを調べられる便利なツールがありますので、これを見ながらcssでスタイリングをしていきます。
https://www.caniemail.com/
しかし上記も曖昧で、効くと書いてあるが効かなかった、というのもあります。笑
なので参考程度にしてもらい、実際に効いているかは実機で見ることおすすめします。
特に気をつけて欲しいのは、
・css3の設定はほぼ効かない。（特にoutlook）
・背景画像はoutlookで表示されない
この2点です。
例えば、ボタンを角丸にしたい場合、gmailやyahooメールは角丸が効きますが、outlookでは四角形で表示されます。
背景画像はoutlookではサポートしていないので、表示されません。
そのため、HTMLメールを作る前に、
・今回のHTMMメールの動作環境はどのメーラーになっているか？
を確認してから制作をするようにしましょう。
そうでないと、せっかく角丸にコーディングしていたが、
outlookで効かないため画像にするなど、修正が多くなり時間がかかります。
次回
今回はあと2項目ほど書きたかったのですが、長くなってしまったので、次回も持ち越したいと思います。
今回はHTMLメールのテーブルコーディングとcss設定について書きました。
ここだけでも分かると思いますが、WEBページと違いHTMLメールのコーディングは結構特殊です。
ただ制作するだけでも時間がかかりますので、制作前に「動作環境」はしっかり確認するようにしましょう！
それでは次回もゆたしく〜〜