menu
menu

HTMLメールのレイアウト・デザインについて | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook7
  • はてなブックマーク5
  • Google+2
  • Pocket0
  • Twitter0

HTMLメールのレイアウト・デザインについて

  • Labs

HTML

こんにちは(・∀・)

 前回はHTMLメールをどうやって作るのかをやりましたが、今回はHTMLメールの基本的なレイアウトやデザインについてご紹介します。順番が逆になり、また、かぶる所もあるのですが。。。

1. HTMLの作成

 HTMLをテキストエディタで作成します。レイアウトは基本<table>レイアウトで作成します。構造と装飾を分ける現在のコーディングとは異なり、HTMLでできることはCSSをつかわずなるべくHTMLで装飾します。また、HTMLメールに変換するとdoctype宣言文や<head>内に記述した内容は無視されます。なのでCSSなどもインラインで記述することになります。しかし、文字コードを指定しないとブラウザで表示した時に文字化けするのでとりあえず文字コードはutf-8を指定しておきますがHTMLメールに変換すると文字コードは自動でiso-2022-jpになります。HTMLメールでは凝ったデザインはせずシンプルなデザインがいいと思います。たくさんあるメールソフトの中でいかに表示崩れのないデザインができるかがポイントです。一番間違いがないのはPSDでデザインした画像を切り抜いてそのまま貼り付けるのがレイアウト崩れのすくないHTMLメールができるのではないかと思います。


HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTMLメールの作り方</title>
</head>
<body>
<table width="99%" border="0" cellspacing="0" cellpadding="10" style="font-family: sans-serif;">
<tr><td>
<p style="font-size: 12px;">サンプルコードや一目でわかる画面イメージで簡単解説!Webデザイン・ホームページ制作に役立つ情報を紹介するWebデザインラボのメールマガジンです</p>
<p><img src="http://www.webdlab.com/common/img/logo.png" alt="Webデザインラボ"></p>
</td></tr>
<tr><td bgcolor="#9fb7d4">
<p style="color: #fff; font-size: 18px;"><b>HTMLメールの作り方</b></p>
</td></tr>
<tr><td>
<table style="font-size: 18px;">
<tr><td style="vertical-align: top;">
<img src="http://www.webdlab.com/common/img/labs/html.png" alt="HTML">
</td>
<td style="vertical-align: top;">
<p style="font-size: 16px;">こんにちは(・∀・)<br>
 通常のメールソフトやgmailなどのフリーメールでもちょっとした文字の装飾などはできますが、本格的なHTMLメールを作るにはどうしたらいいのでしょう?何か特別なソフトが必要なのでしょうか。。。?いいえ、特にソフトは必要ありません。通常のテキストエディタとメールソフト(Windows Live メールなど)、それにWebブラウザがあれば簡単にHTMLメールを作ることができます。そこで今回はHTMLメールの簡単な作り方をご紹介したいと思います。</p>
</td></tr>
</table>
</td></tr>
<tr><td bgcolor="#9fb7d4">
<p style="color: #4776AF; font-size: 12px;" align="center"><a style="text-decoration: none;" href="http://www.webdlab.com/labs/html-mail-2/">続きはこちら</a></p>
</td></tr>
<tr><td>
<p align="center"><a style="text-decoration: none;" href="http://www.webdlab.com/">(C)Webデザインラボ</a></p>
</td></tr>
</table>
</body>
</html>
2. ブラウザで表示

 上記HTMLをブラウザで表示します。


 表示された内容をブラウザ上で全選択してコピーします。


 メールソフトを開いて新規メッセージを開きます。テキスト形式ではHTMLメールを送信することはできませんので、リッチテキスト(HTML)に変更してください。先程コピーした内容をペーストします。


 ブラウザで見た時と同じ様に表示されていればOKです。修正が必要な場合は、再度HTMLを修正するか、この新規メッセージを一度保存して、テキストエディタで開いて直接HTMLを修正する事もできます。


 保存したemlファイルをテキストエディタで開いてHTMLを直接修正することもできます。


 ファイルを開くとHTMLが記述されている所があります。そこのHTMLを書き換えて修正する事もできます。なお、&copy;のような特殊記号は認識されないので、その場合(C)などと記述する必要があります。


 実際に送信したメールのキャプチャ画像です。

 ヤフーメール。


 Windows Live メール。


 iPhone。


関連リンク

 HTMLメールの作り方


参考

 http://www.webcreatorbox.com/webinfo/html-email/

  • カテゴリー:Labs
  • facebook7
  • はてなブックマーク5
  • Google+2
  • Pocket0
  • Twitter0