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

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

PCを触る手

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

HTMLメールについて

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

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

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

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

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」に初期化しておく」と覚えておくと、作業がスムーズです。

----------------------------------------------------------------------------------------------------------------------------------

転職成功率98%の【DMM WEBCAMP COMMIT】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

コーディングのコツ

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の学習で参考になるおすすめのブログ8選!を参考にしてみてください。

 

----------------------------------------------------------------------------------------------------------------------------------

現在の仕事や育児を続けながらも、自身の新しい可能性を発掘してみませんか?
完全オンラインで最大1年間の転職サポートの付いた高品質カリキュラムで、仕事合間や土日時間を有効活用し、未経験から需要の高まるエンジニアを目指しましょう!
まずはお気軽に、無料カウンセリングへ!

キャリア発掘の第一歩
プロのキャリアアドバイザーに相談する!
※最短1分で申し込み可能

まとめ

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

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

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

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点