TOP > Colta日記 > 日記130823

「Colta」コルタ日記

■「HTMLメールにCSSは使えるの?!」ー HTMLメールの作り方 第2回 13.8.23

みなさん、こんにちは。こる博士です。
本日のお題は「HTMLメールにCSSは使えるの?!」です。

前回はコーディングの方法を検証し、HTMLメールには「tableコーディング!」とお伝えしましたが、その次に気になるのは「装飾=CSS」ではないでしょうか?

CSSをHTMLファイルに適用させるには3つの方法があります。
■方法1:外部CSSファイルを作成し読み込む
■方法2:<head>内に<style>タグで記述する
■方法3:HTMLタグの中にstyle属性を使用しインラインで記述する

今回はその3つの方法全てをHTMLメールで検証してみました。
CSSはすべて同じプロパティを使用し、3パターン配信しています。
【今回使用したプロパティ】
・ color: #CC0000;
・ font-size: 20px;
・ font-weight: bold;
・ border: 1px solid #000000;

実際メールを見たら文面の一部分がこうなってるはず↓↓

・文字を赤色、20px、太字に。
・枠線を黒色の実線で1px入れる。

まず、一番問題がなさそうな方法3の「HTMLタグの中にstyle属性を使用しインラインで記述する」です。↓↓↓
HTMLタグにインラインで記述する
うむ。やっぱり問題なくCSSが効いていますね。

次に、方法2:「<head>内に<style>タグで記述する」です。↓↓↓
<head>内に<style>タグで記述する
ほぉ。こちらはCSSが無効になっていますね。実際に配信されたメール文面のソースを見てみると、<body></body>の中だけ配信されているようで<head>内に書いたCSSはそもそも送信されていないということになります。

最後に、方法1:「外部CSSファイルを作成し読み込む」です。↓↓↓
<head>内に<style>タグで記述する
うむうむ。方法2で<body></body>の中だけしか配信されてないのがわかったので、これで外部CSSファイルが読み込まれないのも当然の結果となりますね。

※キャプチャはwindows7/chrome/gmailへ配信したメールです。

というわけで、今日の結論は、
「HTMLメールにCSSは使える!でもインラインでね♪」
となりました。

今回も色々なメールで検証しています。
OutlookやThunderbirdのメールソフトについては3パターン全てCSSが適用されました。逆に融通の効きそうなWebメールに表示のバラつきがありました。

■メールソフト(全部○!)
Becky outlook2007 outlook2010 outlook express windows Live メール thunderbird
インライン
<style>タグ
外部CSS
■Webメール(結果はマチマチ)
yahoo outlook.com
(旧hotmail)
gmail
IE9 chrome Firefox IE9 chrome Firefox IE9 chrome Firefox
インライン
<style>タグ × × × × × ×
外部CSS × × × × × × × × ×
■スマホ(gmailで検証)
iPhone5 galaxy nexus(android)
インライン
<style>タグ ×
外部CSS ×


本日はここまでコル。また来週〜
(こる博士)

<< 前の日記へ
前のページに戻る このページのトップへ
  • メルマガノウハウインタビュー
おすすめ記事

[インタビュー] 四季株式会社様 メールアドレス会員数は、他の施策と組み合わせることで、増やすことができる。

[インタビュー] トライコーン株式会社 ソーシャル一括投稿システム「コトシロ」より多くのメディアに情報を発信することで、情報の露出効果が上がります。

[インタビュー] 株式会社監査と分析様 メルマガの企画・編集は、PDCAサイクルを回すこと!

[インタビュー] 株式会社亀屋万年堂様 クーポンの利用率は9%まで上がる!

[インタビュー] 株式会社極楽湯様 クーポンの内容によってメールのクリック率は大きく違う!

[メルマガ担当者] メール配信結果の指標

[メルマガ担当者] PDCAを回せない10の理由と対策


人気コンテンツランキング

メールの署名(シグネチャ)

Coltaオリジナル署名集。

Thunderbird(サンダーバード)の便利なプラグイン・アドオン

サンダーバードの便利なアドオンを厳選して紹介。

ビジネスメールのテンプレート

ビジネスで使いたいメールのサンプルをご紹介します。
最近のColta日記

3/14 [HTMLメール]「コルミのFacebookページ運用メモ 第1回」

2/28 [HTMLメール]「HTMLメール、フォント(書体)の指定はできるコル?」

11/01 [HTMLメール]「文章(テキスト)の流し込みも要チェックこる。」

10/17 [HTMLメール]「<table>にはいろいろリセットが必要なんですっ。」

10/04[HTMLメール]「<img>にはborder="0"を。」

9/05 [HTMLメール]「background-color/imageを検証してみよう!」

8/30 [HTMLメール]「HTMLメールにCSSのheightは使えない?!」

Colta日記一覧はこちら>>

メール配信ASPのトライコーン株式会社 メール配信代行サービス「アイモス」 LMA マーケティングオートメーションはカンタンに! LOOPASS(ルーパス)が広げるビジネスの可能性 代理店様向け キャンペーン運営サービス「IMOSSS(アイモス)」 メールを依頼したい!”PDCA”を回したい方へ PDCAつき文章作成サービス「アイモス」 無料試用版もあります。Salesforceメールアプリ導入実績No.1 営業効率を最大限化させるPardot運用支援 インターネットサービスに関わる担当者のための情報を紹介するブログ「Web Persons」 クーポン付きメルマガ登録サイト「メールホッパー!」 メールマーケティング辞典 WEBマーケティング用顧客管理システム「クライゼル/KREISEL」
ソーシャルブックマーク