ホームページ > 記事 > ウェブフロントエンド > HTMLメールメールHTMLページ作成ガイド
HTMLメールメールHTMLページ作成ガイド
- 高洛峰オリジナル
- 2017-02-16 13:47:512736ブラウズ
はじめに
メールで HTML を書いたことがある人は、メールの HTML が一般的にテーブルを使用してレイアウトされていることをご存知でしょう。その理由は、ほとんどの電子メール クライアント (Outlook や Gmail など) が HTML 設定をフィルタリングし、電子メールを認識できなくなるためです。
何度も電子メールの書き方を練習し、Du Niang 氏の指導を受けた結果、HTML メールを書くコツは 15 年前の Web ページ作成方法を使用することであることがわかりました。
以下は HTML メールを作成するためのいくつかのルールです
部分的なフォーカス ルール
1. Doctype
現在、最も互換性のある Doctype は XHTML 1.0 Strict です。実際、Gmail と Hotmail は Doctype を削除し、次のものに置き換えます。この Doctype (HTML5 構文は使用できません)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />5 <title>HTML Email编写指南</title>6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>7 </head>8 </html>
2. レイアウト
Web ページのレイアウトにはテーブルを使用する必要があります。まず、背景を設定するために最も外側に大きなテーブルを配置し、次に特定のコンテンツ用にそのテーブルを内側にネストします (p、p などについては考えないでください)。
1 <body style="margin: 0; padding: 0;">2 <table border="1" cellpadding="0" cellspacing="0" width="100%">3 <tr> 4 <td> Hello! </td>5 </tr>6 </table>7 </body>
3. 写真
引用できる外部リソースは写真のみです。その他、スタイルシートファイル、フォントファイル、動画ファイル等の外部リソースを引用することはできません。
一部のクライアントは画像リンクに枠線を追加するため、枠線を削除する必要があります。
多くのクライアント（Gmail など）ではデフォルトで画像が表示されないため、画像がなくてもメインコンテンツが読めることを確認してください。
1 インライン スタイル
すべての CSS ルールにインライン スタイルを使用することが最善です。 Web ページの先頭に配置されたスタイルはクライアントによって削除される可能性が高いためです。 CSS ルールのクライアント サポートについては、ここを参照してください。
また、CSS の省略形は使用しないでください。一部のクライアントはそれをサポートしていません。たとえば、次のようには書かないでください:
<p style="font: 8px/14px Arial, sans-serif;"></p>
次のように書いてください
1
5. W3C チェックサム テスト ツール
一部のクライアントは未修飾の属性を削除するため、最終コードが W3C 検証に合格できることを確認する必要があります。また、テスト ツール (1、2、3) を使用して、別のクライアントでの表示結果を確認します。
HTML メールを送信する場合は、MIME タイプを使用できないことを忘れないでください
1 Content-Type: text/plain;
1 Content-Type: Multipart/Alternative; 6.
他の人がすでに持っているものを使用する 既製のテンプレートは良い選択であり (こことここ)、オンラインでさらに多くのテンプレートを見つけることができます。 自分で開発する場合は、HTML 電子メールのボイラープレートと電子メール学を参照してください。グローバルルール
1. ページ幅は550～650px以内で設定してください。
2. レイアウトにテーブルを使用します。
3. メールを中央に表示する必要がある場合は、表で align="center" を設定してください。
4.