TOP > Colta日記 > 日記130801

「Colta」コルタ日記

■「HTMLメールのコーディング、table?div?どっちがいい?!」ー HTMLメールの作り方 第1回 13.8.1

いきなりですが、答えは、<table>コーディングです。

今では当たり前になっている、「(X)HTML+CSS」コーディングがHTMLメールの場合通用しない事が多々あります。

例えば、「画像を横並びにしたいがしたい!」となった時
一番先に浮かぶCSSのプロパティは「float」じゃないでしょうか?

floatを使ってみると・・・あら、縦に並んでらっしゃる。
(注:決してカラム落ちしているわけではありません。) 【HTMLメール検証:float】outlook2010メール検証結果

そうなんです。「float」が効かないのです。
正確に言うと、メールソフトによって使えるCSSプロパティが異なります。
よくよく見ると、横幅指定(<div style="width:600px;">)も効いてないようで、
中のテキストも改行が入らず伸びてしまっています。

そこで活躍するのが、懐かしの<table>コーディング。
正しい表示はこちら。じゃーん。
【HTMLメール検証:float】yahooメール検証結果

<table>コーディングは、既に過去のものと思われがちですが、
まだまだHTMLメール制作現場では大活躍なのです。

ご参考までに、今回floatプロパティを検証したメールソフト(スマホ)は11個。

■floatが効いたのが、
・Becky
・Windows Live Mail
・Outlook Express
・Thunderbird
・yahooメール(IE/Firefoxで検証)
・gmail(IE/Firefox/iPhone5/Galaxy Nexusで検証)

■floatが効かず、画像が縦並びになってしまったのは、
・Outlook2007/2013
・Outlook.com(hotmailの後継版)
という結果になりました!

ターゲットユーザによってメールソフトを絞って制作する、というのも
1つの手段ですが、より多くの人に見てもらいたいっ、っていうのが本音ですよね。

という事で、HTMLメールをレイアウトする時には「tableコーディング」で!
次回は背景色のつけ方でも検証しようと思います。ではまた。

(コル博士)

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

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

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

[インタビュー] 株式会社監査と分析様 メルマガの企画・編集は、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」
ソーシャルブックマーク