(公開日2023年08月16日)
企業の営業・マーケティング担当者、個人事業主の方の中には、HTMLメールを使用する際に、自分でコーディングしてHTMLメールを作成しようとしている方もいらっしゃるはずです。そういった方のために記事を書いています。
この記事では、HTMLメールの最初に使用すべきタグ、headに使用するタグ、本文に使用するタグ、リンクをつけるタグについて解説します。これを読めば、HTMLメール作成に使えるタグの種類が分かるでしょう。そして自分でHTMLメールを作成する準備を整えられます。
HTMLメールの最初に使用すべきタグを示します。
➀DOCTYPE
②lang属性で言語を指定
まずHTML文章の型をブラウザ、メールクライアントに対して宣言します。
「XHTML 1.0 Transitional」を宣言する場合は以下のように記述してください。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
「HTML 4.01 Transitional」を宣言する場合は以下のように記述してください。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
HTMLぺージが日本語で書かれていることを記述します。
<html lang=”ja”>
headの中に使用すべきタグを示します。
➀文字コード・文字エンコーディングの設定
②viewportをの設定
③メディアクエリーの設定
④CSSプロパティの設定
METAタグを用いて、どのような文字コードを使い、どのような形式で表示するかを指定します。
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”/>
文字化けの防止に有益です。
最近では、ほとんどのメールクライアントがUTF-8に対応しています。
参考記事：HTMLメールが文字化けしてしまうときの原因と対処法は？
viewportとは、画面の表示領域、つまりパソコンやスマートフォンで見えている部分のことです。パソコンの表示画面は広く、スマートフォンは狭いのが特徴です。スマートフォンでviewportが設定されていないと、HTMLメールが、スマートフォンの画面からはみ出してしまいます。
head内にmetaタグとして記述してください。
<meta name=”viewport” content=”プロパティ=値”, “プロパティ=値”, “プロパティ=値”
>
実例を示します。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
user-scalable=no”/>
設定できるプロパティは以下のとおりです。
・width：表示領域の横幅、200～10,000pixel
・height：表示領域の高さ、200～10,000pixel
・minimum-scale：最小の縮小倍率、0～10
・maximum-scale：最大の拡大倍率、0～10
・initial-scale：ぺージ初期読み込み時の拡大率、minimum-scale～maximum-scaleの範囲
・user-scalable：ユーザーに拡大縮小を許可するかどうか
参考記事：スマホに最適化したHTMLメールとは？作り方のコツと注意点を解説
メディアクエリーとは、メディアタイプとメディア特性を組み合わせて作るCSSの仕様のことです。メディアタイプはscreen（パソコンやスマートフォンなど画面を持つデバイス）、メディア特性はwidth（ビューポートの幅）を指定します。
/* 画面サイズが480px以下の場合 */
<style>
@media only screen and (max-width:480px) {
.img {
width:100%;
}
}
</style>
HTMLメールの横幅は600px位が一般的です。2022年3月現在に販売されているスマートフォンのCSSピクセルの横幅は320〜480px。これに合わせて、メディア特性をmax-width 480pxに設定しました。480pxを境界としてスマートフォンとパソコンで表示を切り替えます。
スマートフォン表示用のCSSプロパティを設定します。
設定1：横並びレイアウトの調節
設定2：画像の拡大・縮小
設定3：フォントサイズ
設定4：スマートフォンでコンテンツを非表示にする
PC用HTMLメールで複数カラムの横並びレイアウトにしている場合、スマートフォンでは１カラムで表示させるように調節します。テーブルレイアウトのTDタグの横幅を100%に指定してください。
@media only screen and (max-width:480px) {
.responsive-td {z
width:100% !important;
display: block !important;
box-sizing: border-box !important;
}
}
該当箇所が多いため、headに埋め込み型CSSで記述します。メールクライアントのCSSに上書きされないように!important指定してください。
スマートフォンでは画像の横幅を100%に指定するのが一般的です。
@media only screen and (max-width:480px) {
.responsive-img {
width:100% !important;
height:auto !important
}
}
パソコン用のフォントサイズが小さめに設定されているとき、スマートフォンではフォントサイズを少し大きめに変えます。
@media only screen and (max-width:480px) {
html {
font-size:14px !important;
line-height:1.6 !important;
}
}
一部のエリアをスマートフォンでは表示しないという場合、displayプロパティを使って、コンテンツを消します。
[HTML]
<table class=”hide”>
<tr>
<td>
<img src=”img.jpg”>
</td>
</tr>
</table>
[CSS]
@media only screen and (max-width:480px) {
.hide {
display:none !important;
}
}
ただしdisplayプロパティが効かないメールクライアントがあることに注意が必要です。
参考記事：HTMLメールをレスポンシブ対応で表示させたい時の対処法教えます
HTMLの本文には以下を記述します。
・基本的なタグ
・スタイルを設定する時に使う属性
・HTMLメールの本文にリンクをつけるタグ
まず覚えておくべきものは、TABLEタグ・TRタグ・TDタグ・Pタグ・IMGタグ・BRタグです。
表の作成に利用するタグです。
<table></table>
Table Rowの略で、表内の１行を表わします。
<tr></tr>
Table Dataの略で、<tr>で定義した行の中に表示するデータを表わします。
<td></td>
テーブルレイアウトの実例としてhtmlを示します。
<html>
<body>
<table>
<tr>
<td>A</td>
<td>D</td>
<td>G</td>
</tr>
<tr>
<td>B</td>
<td>E</td>
<td>H</td>
</tr>
<tr>
<td>C</td>
<td>F</td>
<td>I</td>
</tr>
</table>
</body>
</html>
これをブラウザで表示すると以下のようになります。
Paragraphの略で、一つの段落を表わします
<p></p>
このタグはメールクライアントによっては表示崩れするため、用いないほうがよいでしょう。
imageの略で、画像を表示する際に用います。
<img>
Breakの略で、改行を意味します。
<br>
スタイル属性として、cellpadding・cellspacing・border・style・font-size・font-weight・colorを用います。
TABLEタグ内で利用し、セル内の余白の広さを指定します。HTMLメールでは0と指定してください。
TABLEタグ内で利用し、セル同士の間隔を指定します。HTMLメールでは0と指定してください。
TABLEタグ内で利用し、枠線の太さを指定します。HTMLメールでは0と指定してください。
スタイルについての記述を行います
フォントの大きさを指定します。
フォントの太さを指定
フォントの色を指定します。
参考記事：htmlメールのコーディングのやり方！特徴・手順・注意点を解説
リンクを組み込むときのタグを紹介します。
・ウェブサイトへリンク
・メールの送信
・電話の送信
・SMSの送信
リンクをクリックするとウェブサイトへ移動するタグです。
<a href=””https://www.bad-corp.com/”>株式会社B.A.Dホームぺージ</a>
AタグにURLを、<a></a>の間にアンカーテキストを記述します。
実際の表示例は以下のとおりです。
リンクをクリックするとメールクライアントが立ち上がるタグです。
<a href=”mailto:info@bad-corp.com”>メールはこちら</a>
Aタグに「mail to:」を記述しています。
実際の表示例は以下のとおりです。（リンクはしておりません）
メールはこちら
リンクをクリックすると電話を発信するタグです。
<a href=”tel:00-0000-0000″>電話はこちら</a>
Aタグに「tel:」を記述しています。
実際の表示例は以下のとおりです。（リンクはしておりません）
電話はこちら
リンクをクリックするとSMSへ送信するタグです。
<a href=”sms:00-0000-0000″>SMSはこちら</a>
Aタグに「sms:」を記述しています。
実際の表示例は以下のとおりです。（リンクはしておりません）
SMSはこちら
HTMLメールの最初に使用すべきタグ、headに使用するタグ、本文に使用するタグ、リンクをつけるタグについて解説しました。これを読んでHTMLメール作成に使えるタグの種類が分ったと思います。
HTMLメールの作成に用いるタグは独特で難しいのが特徴です。特にテーブルレイアウトに関連したタグはなじみが薄く、使いにくいと思います。不慣れな方が自分で作成するには無理があるでしょう。むしろHTMLメール作成の専門家に依頼したほうがよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
