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だけでブロック要素の表示非表示(トグルボタン)
  • facebook9
  • はてなブックマーク6
  • Google+3
  • Pocket0
  • Twitter0

HTMLメールの作り方

  • Labs

HTML

こんにちは(・∀・)

 通常のメールソフトやgmailなどのフリーメールでもちょっとした文字の装飾などはできますが、本格的なHTMLメールを作るにはどうしたらいいのでしょう?何か特別なソフトが必要なのでしょうか。。。?

 いいえ、特にソフトは必要ありません。通常のテキストエディタとメールソフト(Windows Live メールなど)、それにWebブラウザがあれば簡単にHTMLメールを作ることができます。

 そこで今回はHTMLメールの簡単な作り方をご紹介したいと思います。

1. HTMLの作成

 HTMLをテキストエディタで作成します。レイアウトはテーブルレイアウト、CSSはインラインで記述します。文字コードはブラウザで表示した時に文字化けしないようutf-8を<head>内に指定しておきます。ちなみに文字コードはHTMLメールに変換するとutf-8は無視されてiso-2022-jpになります。書式はHTML4.01 Transitionalで作成しますが、こちらもHTMLメールになったときにはdoctype宣言は無視されているようです。<head>内の記述はすべて無視されるのでCSSはインラインで記述することになります。できあがったファイルはhtmlで保存してください。


HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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">
<tr>
<td bgcolor="#dddddd">
<p style="color: #4776AF;">Webデザインラボ</p>
</td>
</tr>
<tr>
<td bgcolor="#eeeeee">
<p style="color: #d577ab;">HTMLメールの作り方</p>
</td>
</tr>
</table>
</body>
</html>

2. ブラウザで表示

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


 表示された内容を全選択してコピーします。


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


 ブラウザで見た時と同じ様に表示されていればOKです。あとはメールを送信して終了です。

その他

 作成中のメールを保存します。


 保存したemlファイルをテキストエディタで開きます。


 ファイルを開くとプレーンテキスト欄の下にHTMLが記述されている所があります。そこのHTMLを書き換えて修正する事もできます。


関連リンク

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

  • カテゴリー:Labs
  • facebook9
  • はてなブックマーク6
  • Google+3
  • Pocket0
  • Twitter0