【HTML初心者入門】HTMLでメルマガを作成する方法! | WEBCAMP NAVI
【7月の受講枠も残りわずか】

【HTML初心者入門】HTMLでメルマガを作成する方法!

PCを触る手

メールマガジンには、個人で発行しているものもたくさんあります。中には、多くの購読者を抱え、広告出稿の依頼のあるメールマガジンも結構あるようです。ここでは、HTMLでメルマガを作成する方法をご紹介します。

HTMLメールについて

HTMLメールを使う最大の理由は、「画像を使い、自由にレイアウトができる」という点です。

しかし、通常のHTMLとは勝手が違います。やはりメーラーやWebメールで閲覧するブラウザなどさまざまな環境でそれぞれ問題が起きることがあります。

それらの問題に対しても、ある程度「どのメーラー/Webメールで見ても問題のない指定」をする必要があります。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。


HTML・CSS」をマスターして、自分でホームページWEBアプリを作成できるよう になりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

HTMLメールのレイアウトのポイント

これらは必須の内容ではありません。

決まったメーラーに自身で受信したりして完全にレイアウトが確定する場合は必要ありません。

ですが、未知のメーラーや、使用率の低いWebブラウザでWebメールを見られることも考えるのであれば念のために、以下のポイントを押さえておくと安全です。

CSSは使用しない。基本は<table>要素で構成

HTMLメールのチェック対象は膨大です。最近のメーラーはCSSへの対応度が上がっているといわれていますが、いまだにCSSの解釈にはバラ付きがあり最悪の場合、完全に無視される場合もあります。

そのため、現状では昔ながらのテーブルレイアウトを軸に作成していくのが一番安全といえます。Webサイト制作時のクロスブラウザ対応でも、テーブルレイアウトであれば問題は出にくいです。

またメーラーの種類が豊富なことから、CSSでなくてもできる指定(例えば、<table>のbackground属性など)があれば、そちらを率先して使っていくことが良いと思われます。

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。

指定は冗長にする(指定の継承対策)

注意点は以下の3点です。

・フォントサイズやカラーは、<style>要素や<body>要素、大枠の<div>要素にも定義する
・使用している要素に関しては、事前にmargin/padding属性も必ず指定する
・インラインCSSを使用する際は、できるだけ直近の要素に指定

メーラー/Webメールによっては、継承関係(親要素で指定している内容が子要素にも反映されること)が想定通りにいかないことがあります。

どのメーラーにも対応できるように、直近の要素へ指定するようにしましょう。

また、インラインCSSが効かない場合もあるので、フォントサイズなど全体で共通する部分は、<style>要素にも合わせて指定しておきます。

要するになにかの指定を加えたい部分では、直近の要素でしっかり指定することが重要です。その前に指定してあるから大丈夫と考えないことです。

 <table>、<td>、<th>要素は可能な限りwidth、heightを指定

できるだけ細かく設定するのがレイアウト崩れを防ぐ近道です。また使用する際は、インラインCSSを使わずにwidthやheight属性を使用しましょう。

画像使用のルール

注意点は以下の3点です。

・画像で補えるところはできるだけ画像で対処する
・<td>や<th>要素が画像のみを含む場合、「font-size:0」「line-height:0」を指定しておく
・<td>要素内に余白を作る場合は、cellspacingを使う

画像まわりは特に注意します。無理に余白などをHTML側で制御するより、画像に含めてしまった方がズレも起きずに簡単に作成できます。

また、画像を配置する際はフォントサイズなどの関係から想定外の余白ができる場合があります。「画像だけを配置する場合は、フォント関連の指定を「0」に初期化しておく」と覚えておくと、作業がスムーズです。

コーディングのコツ

DOCTYPEはHTML 4.01

普通にWebサイト制作をするのと変わりませんが、DOCTYPEはHTML 4.01を使用してください。HTML5もかなり普及してきているとは思いますが、こちらも安全対策のためです。

メタ情報は詳細に

<meta>要素などはHTMLメールでは意味を持つものではありませんが、そのHTMLメールをWebサイト上にバックナンバーとして掲載する場合や、正常にメーラーで見れない人のために公開する場合のことも考えてしっかりと指定しておいた方がよいです。

・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。

こちらのよくある間違いを紹介!【HTML初心者入門】を参考にしてみてください。

文字コードは「iso-2022-jp」

メタ情報に指定する文字コードは「iso-2022-jp」としてください。他の文字コードでも動作するメーラーやWEBメールはたくさんあると思いますが、やはり一番安全なのはこの文字コードだと思います。

<style>要素はしっかり記述

<head>要素内に<style>要素を記載します。<body>要素や<div>要素などに対して、基本的な初期化と、文字サイズやフォントファミリーカラーなどをすべて同一に設定します。


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔通学不要!スキマ時間でプログラミング学習ができる!
✔未経験者のために開発された効率的な学習カリキュラムを用意!
✔ライフコーチが卒業まであなたの学習をサポートします!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

まとめ

今回の内容をざっくり復習しましょう!

メルマガは読んでもらえることが第一!

記事内容はもちろんですが、レイアウトが崩れたり、うまく受信できなかったりするとそれだけで購読者が減ってしまう可能性があります。内容と同じくらい、レイアウトや書式に気を付けて購読者目線でメルマガを作っていきましょう。