HTMLメールのCSSはインラインか埋め込みか?


相変わらずContact Form 7の深い沼にハマったままのヤマモトです。 

HTMLの必要性

Contact Form 7でもらった問い合わせはメールでウェブサイトの所有者なり管理人に届くわけだが、その問い合わせメールを印刷して保管したいという話もチラホラあったりする。

いわゆるお問い合わせ的な内容なら「名前」「メールアドレス」「問い合わせ内容」くらいで項目数も少ないからテキストメールを普通に印刷すれば事足りるが、「会員登録」的な内容となると、「住所」「電話番号」に始まり以降そのサイト特有の項目がズラッと並んだりして、そもそもテキストメールでは視認性が悪いし印刷なんてしようものなら間延びしたものが数ページに渡って排出されて、見る気がおこらないトホホなものとなっちまうのよ。

と言うわけで、Contact Form 7からのメールをHTMLメールにして、視認性が良くかつ印刷しても「会員登録申込書」的に使えるものを目指すことに。

20年くらい前はHTMLメールなんて初心者か情弱が喜ぶだけの「百害あって一利なし」な代物だと思ってたのだが(笑)、気がつけばBtoC系の営業メールはほぼ全部HTMLになってるのな。

グーグル先生に相談したら、HTMLメールは令和の時代になってもなかなかの曲者で一筋縄では行かない模様。具体的にはメーラーごとに仕様がマチマチというだらしない理由だった。

ちなみにここから下はGmailでの話。グーグル先生によると日本で(ビジネス用途での調査だが)のメーラーシェアはGmailが38%でトップだそうな。次点はOutlookで35%。

HTMLメールへのCSSの当て方

 CSS埋め込み形式でのGmail

上記サイトはとても参考になった。ほぼこれに基づいてHTMLメールのマークアップを施したところ、うまく行った。項目数が多くても大変見やすいレイアウトの会員登録申込書が出来上がった。 

名前とか項目の内容はテスト用のものなので気にするなw

さて、では印刷した時にA4でどれくらいのページになるとか文字の大きさはどうかとか確認しようと印刷プレビューを見ると、、、、

上の画像とこっちで項目の内容が違うけどそれも気にするなwww

 な、なんじゃこりゃ~!

メーラーの本文表示と印刷プレビューがなんで違うデザインになっとるんじゃあ?
結局これはどういうことかと言うと、スタイルシート(CSS)が全部削除されてるのだ。

そもそもCSSの形式とは

この投稿を好んで読む人には釈迦に説法だろうが、そもそもスタイルシートには3種類の適用方法がある。

  1. 外部読み込み形式(CSS専用のファイルをリンクする方法)
  2. 埋め込み形式(HTMLドキュメントのhead内にまとめて配置する方法)
  3. インライン形式(HTMLドキュメントの各タグ内にいちいち記述する方法)

1が最も新しい形式で、3はCSSができた当初の最古の形式だ。今どきのウェブサイトは基本的に1の方式で作成するのだが、メーラーの場合は認識しないこともあるので、古めの2の方式が安全なんだとか。ということで、この会員登録申込書のHTMLメールは全部2の方式で書いたのだ。

するとどうだ、この体たらくヽ(`Д´)ノ

Gmailは、本文表示では2、つまり埋め込み形式に対応しているが、印刷の時はご丁寧にわざわざCSSを全部丁寧に削除なさる、という事のようだ。

何の意味があるのだ?

本文表示でもCSS無しになるならCSS解析機能が搭載されてないということで分かるのだが。。

CSSインライン形式でのGmail

でだ。試しに3のインライン形式にHTMLを修正してみた。一言で修正といったが、これめっちゃ大変なんだからな。入れ子入れ子の5重層くらいになってるテーブルの<table><tr><th><td>といった各タグにCSSをぜーーーーんぶ一個一個に書いていかにゃあならんのだからな。。

その結果。

うまく行った。

本文表示と同じデザインで印刷プレビューが見れた(*^^*)

結論

Gmailは、本文表示では埋め込み形式のCSSを認識できる。

しかし、印刷もするならインライン形式にすべし。埋め込み形式のCSSは印刷プレビューの時点で全部削除される!

他のメーラーは知らん。 

created by Rinker
¥1,540 (2021/09/21 10:05:01時点 楽天市場調べ-詳細)

Hello world!

Contact Form 7 の日付フォーマットが機能しない?
Service

SandY Design Studioでは3つのサービスを提供しております。

Sound
design

ミキシング・マスタリング・レコーディング・編曲・作曲・CD, YouTube, クラウド音楽制作支援・CDジャケットデザイン

Web
design

WordPressによるCMSホームページ制作・Webサーバー・メールサーバー設定・ホームページ運営に関するあらゆる支援

Officework
design

個人事業主、小規模法人のIT活用支援・クライアントサーバー導入・パソコン教室・人事給与, 経理, 総務部門の実務支援

お問い合わせ・ご依頼

contact