レスポンシブ HTML 電子メール テンプレートの作成:ステップバイステップの初心者ガイド
この初心者向けガイドでは、レスポンシブ電子メール テンプレートを作成する方法を学びます。コード スニペットを使用した段階的な手順に従って、どのデバイスでも見栄えの良い電子メール テンプレートをデザインします。
このプロジェクトは、メール デザインの基本をマスターしたい初心者に最適です。
ステップ 1:基本構造を設定する
電子メール テンプレートを構築するには、基本的な HTML 構造から始めることができます。これには DOCTYPE が含まれます 電子メールの宣言、head の定義 と body セクション、および head でのメタ タグの使用 セクションを参照して、適切なモバイル レンダリングとズームを確保してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Email Template</title>
</head>
<body>
<!-- Email content goes here -->
</body>
</html>
ステップ 2:電子メール構造を作成する
表を使用して電子メールの基本構造を作成します。これにより、さまざまな電子メール クライアント間での互換性が確保されます。
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<!-- Email content goes here -->
</table>
</td>
</tr>
</table>
ステップ 3:コンテンツとインライン スタイルを追加する
電子メール クライアントによって CSS のレンダリング方法が異なるため、インライン スタイルを使用する方が安全です。簡単なメール本文の例を次に示します。
<body style="font-family: 'Poppins', Arial, sans-serif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 20px;">
<table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;">
<!-- Header -->
<tr>
<td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
Responsive Email Template
</td>
</tr>
<!-- Body -->
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
Hello, All! <br>
Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam.
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis.
</td>
</tr>
<!-- Call to action Button -->
<tr>
<td style="padding: 0px 40px 0px 40px; text-align: center;">
<!-- CTA Button -->
<table cellspacing="0" cellpadding="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit.
</td>
</tr>
<!-- Footer -->
<tr>
<td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
Copyright © 2024 | Your brand name
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
主な要素とその機能の内訳は次のとおりです。
本文タグとフォントのセットアップ
<body style="font-family: 'Poppins', Arial, sans-serif">
これにより、メールのデフォルト フォントが「Poppins」に設定され、「Poppins」が使用できない場合は Arial とサンセリフにフォールバックされます。
テーブル構造
<table width="100%" border="0" cellspacing="0" cellpadding="0">
これは、電子メールの幅の 100% を占める最も外側のテーブルです。 border 、cellspacing 、および cellpadding デフォルトのスタイルと間隔を削除するには、0 に設定します。
このテーブル内にネストされているのは別の <table class="content"> です。 600 ピクセルの固定幅、td align="center" で親を中心に配置 。
この内部テーブルには境界線と特定のスタイルが含まれており、メイン コンテンツ領域として定義されます。
ヘッダーは、インライン CSS (#345C72) を使用した濃い青色の背景、白いテキストの色、および大きなテキスト サイズ (24 ピクセル) でスタイル設定されます。メールの冒頭で注意を引くように設計されています。
注意 : 代わりに、このセクションをブランド名またはロゴでカスタマイズできます。
本文の内容
本文セクションには電子メールのメイン メッセージが含まれており、読みやすくするためにフォント サイズ 16 ピクセル、行の高さ 1.6 に設定されています。コンテンツは左揃えで、<br> を使用します。 タグは行の間隔を空けるのに役立ちます。
行動喚起 (CTA) ボタン
<!-- Call to action Button -->
<tr>
<td style="padding: 0px 40px 0px 40px; text-align: center;">
<!-- CTA Button -->
<table cellspacing="0" cellpadding="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
ここの CTA ボタンは、ヘッダーと一致する背景色、丸い角 (border-radius: 5px) で目立つようにデザインされています。 )、太字の白いテキスト。
<a> ボタン内のタグは、デフォルトの下線 (text-decoration: none) を削除するようにスタイル設定されています。 ）、受信者が「無料相談を予約」できる Web ページにリンクされています。
フッターはヘッダーのスタイル設定アプローチを繰り返していますが、暗い背景 (#333333) と小さなフォント サイズ (14px) を使用しています。著作権情報、リンク、その他の連絡先詳細を含めることができます。
イラスト
テンプレートのさまざまな部分の図:ヘッダー、CTA ボタン、フッター
ステップ 4:レスポンシブにする
電子メールがモバイル デバイスで適切に表示されるようにするには、CSS メディア クエリを使用できます。ほとんどのスタイル設定はインラインですが、応答性の高い動作を実現するには、<style> を追加する必要があります。 head のブロック 。
メディア クエリは、デバイスの幅に基づいてスタイルを調整します。
<style>
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
display: block !important;
padding: 10px !important;
}
.header, .body, .footer {
padding: 20px !important;
}
}
</style>
この特定の CSS スニペットの内訳は次のとおりです。
@media screen and (max-width: 600px) { ... }
このメディア クエリは、最大幅 600 ピクセルの画面をターゲットとしています。次のスタイルは、画面幅が 600 ピクセル以下のデバイス (通常はスマートフォンや一部の小型タブレットなど) でメールが表示される場合にのみ適用されます。
メディア クエリ クラス内のスタイル:
.content
width_: 100% !important;_:このスタイルは.contentの幅を変更します。 table では、HTML で指定されている 600 ピクセルの代わりに画面の全幅を使用します。!importantこのルールは、他の競合するスタイルをオーバーライドするために使用されます。display: block !important;:<table>ですが 要素は当然ブロック レベルの要素であり、display: blockを設定します。 一部の電子メール クライアントで要素が期待どおりに動作することを明示的に確認するのに役立ちます。padding: 10px !important;:.content内のコンテンツの周囲にパディングを追加します。 表を作成し、HTML の元の 40 ピクセルから縮小して、小型デバイスで縮小された画面スペースを有効に活用できるようにします。
.header、.body、.footer
padding: 20px !important;:このスタイルはヘッダー、本文、 フッターのパディングを均一に設定します。 セクションを20ピクセルにします すべての面に配置され、小さな画面向けに間隔が最適化されます。これは、HTML で定義されたさまざまなパディング設定をオーバーライドします。場合によっては、より大きな値が含まれます。
電子メールのデザインのコンテキストでは、!重要 の使用 これは、スタイルが意図したとおりに適用されることを保証するために非常に一般的であり、デフォルトのスタイルと、電子メール クライアント自体によって適用される可能性がある他の競合する可能性のあるスタイルの両方をオーバーライドします。
ステップ 5:電子メール クライアント全体でテストする
互換性と応答性を確保するには、さまざまな電子メール クライアント (Gmail、Outlook、Apple Mail など) およびデバイス間で電子メール テンプレートをテストすることが重要です。 Litmus や Email on Acid などのツールがこれに役立ちます。
ステップ 6:Google フォントを追加する
Google フォントを HTML 電子メール テンプレートに組み込むと、見た目の魅力が大幅に向上します。
ただし、すべての電子メール クライアントが Web フォントをサポートしているわけではないことに注意することが重要です。 Apple Mail のように、Google Fonts をサポートしているものもありますが、Gmail のようにサポートしていないものもあります。すべての受信者にとって電子メールが適切に見えるようにするには、常に代替フォントを提供してください。
Google フォントをメール テンプレートに追加する方法と、Google フォントをサポートしていないクライアント用のフォールバック オプションを次に示します。
Google フォントを選択してください
まず、Google Fonts Webサイトにアクセスしてフォントを選択します。この例では、「ポピンズ」を使用してみましょう。
メールのヘッダーにフォント リンクを追加します
Google フォントへのリンクを <head> に含めます。 HTML ドキュメントの。これはすべての電子メール クライアントでサポートされているわけではないため、スタイルに適切なフォールバック フォントがあることを確認してください。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
スタイルにフォントを適用する
インライン CSS を使用して Google フォントを HTML 要素に適用し、常に汎用のフォールバック フォントを含めます。 <style> のサポートが異なるため、電子メール テンプレートではスタイルをインラインで適用する方が安全です。 電子メールクライアント間でタグを使用します。
body にフォントを適用する方法は次のとおりです。 メールの内容を変更し、フォールバックを含めます:
<body style="font-family: 'Poppins', Arial, sans-serif;">
<table width="100%" cellspacing="0" cellpadding="0">
<!-- Email content -->
</table>
</body>
私たちが作ったもの
以下は、私たちが設計した電子メール テンプレートのスクリーンショットです。ロゴのプレースホルダーを含むヘッダー、メッセージの本文セクション、連絡先とサブスクリプションの管理リンクを含むダーク色のフッターを備えたプロフェッショナルなレイアウトが特徴です。
メール テンプレートのスクリーンショット
追加のヒント:
- 多くの電子メール クライアントは
<style>をサポートしていないため、CSS はできる限りインラインにしてください。 タグ。 - ウェブセーフ フォントを使用して、すべてのメール クライアントでテキストが正しく表示されるようにします。
- HTML をサポートしていないクライアント、または HTML が無効になっているクライアントには、必ずプレーン テキスト バージョンのメールを提供してください。
このガイドが、レスポンシブ電子メール テンプレートを作成するための基本的なフレームワークを提供することを願っています。電子メールのデザインに慣れてきたら、より複雑なレイアウトやスタイルを試すことができます。
コーディングを楽しんでください!
無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう
-
Gmailがダウンしたときにパニックを防ぐためにできる4つのこと
Gmailがダウンしたとき、世界は本当に終わりますか？ Gmailを当然のことと考えるのは非常に簡単です。なぜなら、Microsoft Windowsやそのまつげのように、何度も目をつぶっても取り除けないように見えるからです。Gmailは常にそこにあります。しかし、Gmailがダウンすると、全世界が止まるように見えます。 Twitterは、Gmailがダウンしていて、何をすべきかわからないことをパニックに陥れている人々ですぐに騒がれています。慌てる代わりに、Gmailが故障しているときに気分が良くなる可能性のあるいくつかのことを試すことができます。 待つ Gmailが最終的に復活すること
-
Android携帯にメールアカウントを追加する方法
スマートフォンが私たちの日常生活の一部になっていることは間違いありません。スマートフォンは単なる娯楽や時間の経過の手段ではありません。今日、スマートフォンはビジネス、生産性、その他さまざまな目的で使用されています。スマートフォンが生産性の向上に役立つ方法の1つは、1つだけでなく複数のアカウントからメールにアクセスすることです。そのため、Androidフォンにメールアカウントを追加するトピックを取り上げます。特に複数のアカウントからのメールを読んだり返信したりするためにAndroidスマートフォンを使用すると、確実に多くの時間を節約できます。 Androidフォンを使用してメールアカウントを追