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

2024.01.29

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

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLメールについて

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

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

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

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

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

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もかなり普及してきているとは思いますが、こちらも安全対策のためです。

メタ情報は詳細に

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

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

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

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

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

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

まとめ

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

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

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

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする