HTMLメール作成の基礎の基礎 (レガシーな技術) #mail

弊社では、メルマガを作成する際にHTMLメールを用いていて、一部事業や配信内容においては手でコーディングしている。
理由はいくつかあって

かっこいいツール入れるほどお金をかけたくない
かっこいいツールでは、デザインがぐちゃっとなる方が対象のうち多数を占める

などである。
本記事は、社内でHTMLメルマガ作成の講座を行ったものを流用したものである。

アジェンダ

HTMLの基礎
HTMLメールの基礎
コメントについて
Table基礎
CSS入門の入門

HTMLの基礎

HTMLとは

創ったのは、この方。ティム・バーナーズ・リーさん。(誰か、わかりますよね?)

出典: INTERNET ACADEMY

HTMLとは、Hyper Text Markup Languageの略です。

Hyper Text
- ハイパーリンクを埋め込んだテキスト( 平たくいうと Webサイト )
Markup
- テキスト内の役割を明示する
Language
- 言語 ( 記述フォーマット )

つまるところ、HTMLというのは、 Webサイトにおいてテキストそれぞれの役割を明示してあげるための記法である 。
(というわけで、さらっと書きましたが、ほとんど全てのWebサイトはHTMLで書かれています。)

HTMLクイックリファレンズ - HTMLとは
 TechAcademy - 今さら聞けない！HTMLとは【初心者向け】

HTML記法の基本

開始-終了タグ
タグ種類と属性
入れ子
空要素( empty element )
基本構造

開始-終了タグ

<開始タグ>～</終了タグ>で囲んで、要素（element）の種類を指定することができます。
書く時のおすすめは、先に開始,終了タグ両方書くこと。(Emmetとか活用してね。)

set_start_end_tag.html

<p>element</p>
<h1>element</h1>

タグ種類と属性

タグ内のpやh1が要素の種類(役割)を表します。
さらに、要素に属性をもたせることができます。

set_property.html

<p align="center">内容</p>
<h1 style="text-align: center; font-weight: bold">内容</h1>

HTMLタグリファレンス（目的別）

入れ子( Nest )

タグは入れ子にできます。
Emmetでいう div>p>p*2 という構造だと。

nest.html

<div>
  <p>
    <p>element</p>
    <p>element</p>
  </p>
</div>

<div><p><p>element</p><p>element</p></p></div>

上下、両方同じ構造です。
ただ、わかりやすさの観点から、上のように改行とインデントを用いてあげることをおすすめします。
CRMチームでは、HTMLのコーディング規約はないので、個々人の主観に委ねられていますが、他の人が見やすいコーディングを心がけましょう。

空要素( empty element )

HTMLの中には、 <br> や <img> のように、要素内容を持たない空要素（empty element）と呼ばれるものもあります。

コラム

Marketoでは、改行に <br /> を使います。
brタグは便利ですが、著者(前田)的には使わないことをおすすめします。
理由は、
- 使用機種によって横幅が異なる
- 使用機種側の仕様によって表示崩れが起こる
- コードとして汚い

です。
わかった上で、使うのはOKです。

基本構造

基本的に次の構成になります。

ドキュメントタイプ宣言
html
- head
  - ページの基本情報
- body
  - 内容

コードで書くとこんな感じ。

basic_structure.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <div>
      <p>リンクを入れたよ。</p>
      <a href="https://sites.google.com/a/leverages.jp/portal-site/">portalsite</a>
    </div>
  </body>
</html>

Webページを作ってみよう

上のコードをコピーして、自分のテキストエディタで保存してください。
拡張子は .html です。
テキストエディタからWebサイトを開ければそれで、そうでなければファイルをChromeにドラッグアンドドロップ!

テキストを入れよう

テキストを入れましょう!
pタグを使います。

div, spanでもテキストは入れられる

div, span, preタグでもテキストを入れることができます。
役割が異なりますので、正しく使いましょう。

div
- かたまりとして定義(ブロック要素)
- <DIV>･･･ひとかたまりの範囲として定義する（ブロック要素）
span
- かたまりとして定義(インライン要素)
- <SPAN> …… ひとかたまりの範囲として定義する（インライン要素）

preタグはやっぱおすすめしない

ソースを整形済みテキストとして表示する、というちょっと特殊なpreタグ。
ブラウザ依存が大きいので、著者的にはおすすめしない。

画像を入れよう

<IMG> …… 画像を表示する

メールの場合は、srcは公開サーバーのデータなのでURL指定です。

URLリンクを入れよう

<A> …… リンクをはる、リンクの出発点・到達点を指定する

URLリンクを埋め込もう

画像にリンクを埋め込んでください!
できます? 入れ子を思い出して。

HTMLメールの基礎

HTMLメールとは

メールの文面をHTMLで記述したもの。

なぜ使うのか

読者が読みやすい文面にするため。
掘り起こしなどのKPIでいうと、クリック率を高めるため。

Webページとの違い

Webブラウザは日々進化しており、HTMLもそれに応じて進化しています。
そして、逆もあって、できることを増やすためににHTMLが進化して、ブラウザがそれにあわせていくということも。

ところが、メールでいうところのブラウザである、メールクライアントはほとんど進化していない!!!!
理由は、ほとんどテキストのやりとりだから・・・。
というわけで、メールにおけるHTMLはこの世の進化からだいぶ遅れている。

メール独特の辛さ

クライアントによってばらばら
新しい機能はことごとく使えない

クライアントによってばらばら

Gmailではいけても、FireFoxでだめとか結構ある。
どっちもいけてるけど、見え方微妙に違う、とか。
少なくなってきたけれど、国内キャリアメールはさらに遅れているので「まじかよ!?」ってことがたまに起こる。

新しい機能はことごとく使えない

デザインも執筆当時は、フルCSSとかでWebサイトを構築するのだけれど、そんなことできない。
テーブル構造という、Webサイトが一般社会にやってきたよーってときくらい昔の技術を使うしかなかったりする。
それでも、少しずつ進化しているけれど・・・クライアント全てが対応してくれないとユーザーには影響がでてしまうので注意。

テーブルレイアウト

この画像をここに、この文章をあそこにー・・・。
というレイアウトを作成するときに、先に述べたように、HTMLではテーブルレイアウトで行います。

コメントについて

HTMLメールではそんなに必要ではなけれど、コーディングする上で欠かせない技術であるコメントについて触れます。
 でコメントを作成できます。(要は、読者側からすれば見えないデータになります。)

comment.html

<!DOCTYPE html>
<!-- html part -->
<html>
  <!-- head part -->
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <!-- body part -->
  <body>
    <div>
      <p>リンクを入れたよ。</p>
      <!-- link to leverages portal site -->
      <a href="https://sites.google.com/a/leverages.jp/portal-site/">portalsite</a>
    </div>
  </body>
</html>

Table基礎

構成要素

HTMLメールのテーブルレイアウトにおいて重要なタグは、

table
- テーブルを作成する。
tr
- 行を定義する。(作成する)
td
- セルを定義する。(作成する)

サンプルを示します。どんな構造かわかりますか?
table>(tr>td)(tr>td*2)(tr>td)

sample_table.html

<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

手書きで組んでみよう

これを分解してみましょう。

出典: メルラボ様

手順
1. タグの種類が変わるところを見つける
2. 最小単位を四角に置き換える
3. 親を探す
4. 親も四角で囲む
5. table, tr, tdタグを書き込む

回答っぽいもの Click Here To See

前田的回答。
赤枠 : table , 青枠 : tr

同じものが複数パターンで作れます。
一概になにが正解とはいえないところが難しいところです。
ただ、次の3つの観点は大事にしてほしいです。

変更に対して柔軟か
使い回しやすいか
見やすいか

Emmetを使おう

Emmetは便利です。Emmetを使いましょう。
「使ってるエディタ emmet」で検索。

HTML/CSSを爆速コーディング Emmet入門第1回 Emmetを薦める理由

CSS入門の入門

CSSとは

Cascating Style Sheetsの略。(覚える必要なし)
HTMLが見出しやヘッダ情報などWebページの文書構造を形作るための言語であるのに対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を持つ言語である。

Webページ = HTML(文章構造) + CSS(見栄え)

HTMLクイックリファレンス - CSSの基本
 今さら聞けない！CSSとは【初心者向け】

HTMLメールとWebにおけるCSSの違い

WebにおけるCSSは、埋め込みや別ファイルで反映させることが主流です。
HTMLメールでも埋め込み(headタグ内にCSSを記述)は可能ですし、少しずつ主流になりつつあります。
ただ、受信する属性によっては、まだインライン形式という・・・CSSが生まれた頃の太古の形式お使うべきこともあります。

set_css.html

<!-- 埋め込み形式 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      p {
        color: #333333;
        font-size: 1.5em;
      }
    </style>
  </head>
  <body>
      <p>テキスト</p>
  </body>
</html>

<!-- インライン形式 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
      <p style="color: #333333; font-size: 1.5em;">テキスト</p>
  </body>
</html>

では、インライン形式が辛いのはなんででしょうか?

文字色を変えよう

color …… 文字色（前景色）を指定する

個人的には、カラーコードは大文字派です。
なお #FFEEDD → #FED とかけます。

文字の大きさを変えよう

font-weight …… フォントの太さを指定する
 font-size …… フォントのサイズを指定する

px か em か。

Marketoは、たしか全部px。
著者はMailPublisher使っているけど、全てem形式で設定。

理由は
- 扱いやすい
- PC, スマホなど画面サイズが変わるため

背景色を変えよう

background-color …… 背景色を指定する

枠線を引こう

border …… ボーダーのスタイル・太さ・色を指定する

CSS逆引き辞典の紹介

タイルシートリファレンス（目的別）
1年目は相当にらめっこしました。
ツール使える人は、そういうことしなくてもツールがやってくれると思う。
なお、webサイトでできることが、メールではできない、なんてことはよくあることです。
メールを送信してみてテストすることを忘れずに!

CSSは外側からあてよう

CSSは、入れ子構造の親 → 子に引き継がれます。
ですので、子全体に適応するCSSや子全体の基準になるCSSは積極的に親に移していきましょう。

chldren_have.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p style="color: #456; font-size: 1.0em;">text normal</p>
    <p style="color: #456; font-size: 1.5em; font-weight: bold;">bold</p>
    <p style="color: #F00; font-size: 1.5em;">red</p>
    <p style="color: #456; font-size: 1.0em;">text normal</p>
  </body>
</html>

parent_has.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div style="color: #456; font-size: 1.0em;">
      <p>text normal</p>
      <p style="font-size: 1.5em; font-weight: bold;">bold</p>
      <p style="color: #F00; font-size: 1.5em;">red</p>
      <p>text normal</p>
    </div>
  </body>
</html>

さて、なんででしょう?

ふりかえり

HTMLの基礎

HTMLってなに?
記法の基本を思い出せますか?
基本構造はどうなっている?

HTMLメールの基礎

なぜHTMLでメールを書くの?
WebサイトのHTMLとの違いは?

Table基礎

テーブルレイアウトはなんのために使う?
HTMLメールのテーブルレイアウト構成要素3つはなに?

CSS入門の入門

CSSの役割ってなに?
HTMLメールでCSSを使うときに気をつけることは?