menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 3 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 2 ↓) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 9 ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 7 ↑) 【PHP】PHPでシンプルなメールフォーム
  6. ( 5 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  7. ( 4 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  8. (10 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  9. ( 9 - ) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
このエントリーをはてなブックマークに追加

【メール】HTMLメールの作り方

【メール】HTMLメールの作り方

こんにちは(・∀・)

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

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

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

Contents

  1. HTMLの作成
  2. ブラウザで表示
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>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; padding: 5px 10px; background: #9fb7d4;">
<p style="color: #fff;">Webデザインラボ</p>
<!--table-cell--></div>
<div style="display: table-cell; padding: 5px 10px; background: #ccc;">
<p style="color: #fff;">HTMLメールの作り方</p>
<!--table-cell--></div>
<!--table-row--></div>
<!--table--></div>
</body>
</html>
2. ブラウザで表示

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

【メール】HTMLメールの作り方

ソースコードではなく画面上に表示された内容を全選択してコピーします。

【メール】HTMLメールの作り方

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

【メール】HTMLメールの作り方

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

このままメールを送信すればHTMLメールの送信は終了です。


関連リンク

【フォーム】PHPでシンプルなメールフォーム

  • HTMLメール
このエントリーをはてなブックマークに追加