Blog

Outlookは、電子メールビルダーにとって悪夢です。ただし、電子メールのレイアウトを実装するときに役立つ一般的なルールがいくつかあります。それらが何であるか見てみましょう。

この記事は、2021シリーズの電子メールの実装の一部です。紹介を見逃した場合は、基本と生成された電子メールをテストする方法をお読みください。

このパートでは、Outlookのレイアウトを実装するときに覚えておく必要のあるいくつかのルールとベストプラクティスについて説明します。

HTMLとCSSの一般的な再利用可能なレイアウトに関しては、 paddingとmargin DIV要素が重要です。ただし、Outlookでは、いくつかの制限があります。

Outlookの間隔について少し

Outlookは、通常の要素のpaddingまたはmarginを介して定義されたCSS間隔ではうまく機能しません。代わりに、次のオプションのみを使用する必要があります。

• タイポグラフィ要素（ P 、 Hx 、 UL 、 LI ）は、Outlookでいくつかのデフォルトの余白を使用しています。 （場合によっては） 0にすることしかできませんが、Outlookが尊重する特定の値にすることはできません。
• CSS間隔はテーブルセル（ TD ）にのみ正しく適用されますが、余分なテーブル間隔（以下のコードサンプル）を破棄しない限り、必要な値が正確に得られる保証はありません。

したがって、ある程度の間隔のあるコンテナが必要な場合は、テーブルを使用することをお勧めします。

コンテナテーブルの作成

後で間隔を適用できるようにする非常に単純な1x1テーブルから始めます。この記事では、角が丸くコンテナを実装するのはまったく別の話なので、角が鋭く背景が白い単純なコンテナに固執します。ただし、後で構築するこれらの基礎を理解することは重要です。

コンテナテーブルのベースコード

基本的なテーブルコンテナのコードは次のとおりです。

 
 
 
 
 [CONTENT] 
 
 
 

重要な部分は、すべてのレベルで可能なすべての間隔をリセットすることです。

• すべてにmarginとpadding 0設定されています。
• TABLEは、HTML属性とCSSの間隔に影響を与えるすべての属性（ cellspacing 、 cellpadding 、 border 、 width

これにより、電子メール本文のベースとして次の結果が生成されます。

パディングの適用

次のタスクは簡単です。コンテナの内部パディングを定義する必要があります。あなたがする必要があるのはあなたのテーブルセルのスタイルにパディングを追加することです。これは、Outlookと他の電子メールクライアントの両方で同じように機能します。

私たちの場合、デザイン要件に一致するように、すべての側面から24px

これが最終的なコードで、前のコードとpadding

 
 
 
 
 [CONTENT] 
 
 
 

他の専門分野は必要ありません。私たちのテーブルレイアウトは、すでに両方の世界で同じベースラインを保証しています。

結果は次のようになります。

まだ角が丸くなっていませんが、良いスタートです。

テーブル内の間隔を一定にするための他のオプション

テーブルセルでパディングを使用する代わりに、特定のサイズのテーブルセルを追加することもできます。垂直方向の間隔にはオプションの上/下の行、水平方向の間隔には左/右の列を含めます。

これは、次に何をするかを理解するための表のスケッチです。

一部の側に間隔が必要ない場合は、それぞれの行または列を完全に省略でき、残りは引き続き機能します。

paddingした基本的な例と同じ視覚的な結果をもたらすコードは次のとおりです。

 
 
 
 
 
 
 
 
 
 
 [CONTENT] 
 
 
 
 
 
 
 
 
 

基本的なオプションよりもはるかに複雑であることがわかりますが、この3x3レイアウトは、次の記事で部分的に活用する興味深い概念であるため、覚えておいてください。

可能であればマージンを避けてください

margin paddingのみを使用して、一貫性を保ち、開発戦略を1つだけにすることをお勧めします。

TABLEコンテナを背景なしで使用して、 paddingを介して要素間の負のスペースをシミュレートできます。特定のコンテナの最初の要素を除いて、コンテンツの一般的なフローで上部のパディングを使用しています。

margin使用を検討できますが、Outlookで簡単に壊れてしまう可能性があるため、それに関連するすべての変更の後に徹底的なテストを行うことを期待してください。だから私はそれを完全に避けようとします。

テーブルセルの垂直方向の配置

Outlookとテーブルに関して言及する価値のあるもう1つのことがあります。テーブルセル内に画像しかない場合、その垂直方向の配置に一貫性がないように見えることがあります。

前回の記事で示したタスクのリストでこの問題が発生しました。それらの全体的なレイアウトは、左側の列にチェックボックスの画像（チェックされているかチェックされていないか）があり、右側の列にそれぞれのタスクテキストがあるテーブルです。

すべてのテーブルセルが一番上に配置されますが、Outlookでは、テーブルセルの一番上への画像の配置が、次のテーブルセルのコンテンツに1つ以上の行があるかどうかによって異なるという不整合が発生しました。コードとセルの配置が両方のテーブル行で同じであるにもかかわらず、2番目のチェックボックスがそのテキストとどのようにずれているかに注意してください。

これは、チェックボックステーブルセルの初期コードであり、すべての配置が実際に同じであり、一番上にあることを確認できます。

これらの配置はすべて、標準の電子メールクライアントで正しく使用されますが、テーブルセルに画像のみが含まれ、独自のロジックを使用している場合、Outlookはどういうわけかそれらを無視します。

ヘルプのための特殊文字

この場合、テーブルセル内のベース画像の位置を標準化するための迅速で簡単な修正を見つけました。修正は、テーブルセルに実際のテキストコンテンツを含めて、テキストを含む右側のセルと同じレイアウトロジックが必要であるように見せることです。しかし同時に、ユーザーにテキストを表示したくありません。

この場合の魔法の公式は、文字‌ （ゼロ幅非接合子）。これは、標準のWeb開発中でも、多くの非標準の状況で非常に役立ちます。スペースを取らないが、同時にキャラクターとしても機能するので、スペースさえも他のキャラクターがうまく合わないプレースホルダーとして使用するのは素晴らしいことです。あなたはそれについてもっと読むことができます。

したがって、これを画像の前に追加すると、初期位置はテキストの位置と同じになり、Outlookが提供する揮発性のテーブルセル境界ではなく、この非表示のテキストに画像が配置されます。画像の位置をさらに調整する必要がある場合でも、前の記事で示したインラインの垂直方向の配置を利用できます。

‌調整されたコードです。追加した：

標準のOutlook条件付きマークアップを使用してOutlook専用の文字を追加したことに注意してください。

これは、テキストの下部に一貫して配置された両方のテーブル行の結果の出力です。

次は何ですか？

これは、2021年の一連の記事「電子メールの実装」の第4部でしたが、まだ学ぶべきことがあります。あなたが最も興味を持っていることに基づいてこれらの記事の1つを続けるか、シリーズ全体を読んでください：

• 2021年の電子メールの実装：生成された電子メールの基本とテスト方法
• 2021年の電子メールの実装：Outlookで機能する影付きの丸いボタン
• 2021年の電子メールの実装：Outlookで機能する垂直方向の配置でインラインタグを作成する方法
• 2021年の電子メールの実装：テーブルの間隔と垂直方向の配置に関するOutlookの詳細
• 2021年の電子メールの実装：Outlookのコンテナーに丸みを帯びた角を追加する方法

前回の記事では、Outlookでもうまく機能する、角が丸い一般的なコンテナを作成する方法を紹介します。