たきゃはしです

Webとかデザインとかプログラムとか

はじめてのHTMLメール


先日、HTMLメールの作成依頼を受けたのですが

  • HTMLメールについては初心者、ド素人ともいう
  • メルマガの発行部数は数十万部

というわけで事前に色々と調べました。
むしろ調べるを得ない。

ヘッダーのサンプルソース

しょっぱなから悩みました。
書き方はともかく、ソースの先頭にズボボーッ!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type"	content="text/html; charset=iso-2022-jp">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ここにタイトル</title>
<style type="text/css">
<!--
body { color: 2a2a2a;}
a:link { color: #00f; }
a:visited { color: #800080; }
a:hover{ color: #f00; }
-->
</style>
</head>


CSS書いてますけど、信用ならない。理由は後述

HTMLメールはtableコーディングで

「僕はdivタグとfloatプロパティで楽勝^^」

というわけにもいかないようです。


一応、CSSは使えるけど
メーラーによっては効かんようです。

サンプルソース

//tableコーディングのサンプル
<table width="400" summary="サンプルコンテンツ">
	<tr><th colspan="2" abbr="コンテンツの見出し">サンプルですけど何か</td><tr>
	<tr>
		<td>左側です</td>
		<td>もちろん右です</td>
	<tr>
</table>

出力







サンプルですけど何か
左側です もちろん右です

CSSの使用はインラインで

それが無難なようです。
なんでもメーラーによって(ry・・・


サンプルソース

<span style=" font-size: 18px; color: #090;">ちなみにインラインってこんな感じ</span>

出力

ちなみにインラインってこんな感じ

画像は絶対パス

○良い

<img src="http://0402.hogehoge.com/img/hoge0402.jpg">

×残念

<img src="img/hoge0402.jpg">


コーディング中に違和感でたぶん気づくと思うけど
見落としがちかな・・・と思います。

HTMLメールのまとめ

HTMLメールは、HTML 4.01 TransitionalでtableでCSSの使用はインラインで画像は絶対パスでコーディングすればOK!