開発者向け
2021年の電子メールの実装：Outlookのコンテナーに丸みを帯びた角を追加する方法
By Martin Hejtmanek
丸みを帯びた角と展望。シンプルに聞こえますよね？それらを実装するにはいくつかのアプローチがありますが、どれも単純ではありません。それで、どれが最高のものですか？
この記事は、2021シリーズの電子メールの実装の最後の部分です。紹介を見逃した場合は、基本と生成された電子メールをテストする方法をお読みください。
丸みを帯びたボタンと丸みを帯びたインラインタグに関する以前の記事で、Outlookの丸みを帯びた角のサポートを活用するためのVMLオブジェクトの使用法について説明しました。
この最後の部分では、電子メールの本文部分をラップするために使用する一般的なコンテナーと、電子メール内にレンダリングされたコメントスレッドのテーブルのようなプレゼンテーションに丸みを帯びた角を実装する方法を示します。
何がそんなに複雑なのですか？
以前の記事ですでに使用されている丸い角に別の記事が必要なのはなぜか疑問に思われるかもしれません。問題は、以前のソリューションでは、高さと幅が定義されたプレーンテキストの非常に単純なVMLオブジェクトが表示されることです。
これは、次のような一般的なコンテナの場合は機能しません。
- 見出し、リンク、表などの豊富なコンテンツ
- ネストされたVMLオブジェクト（ボタン、ワークフロータグなど）-丸みを帯びたボタンに関する記事で述べたように、ネストされたVMLオブジェクトはOutlookでは実際にはサポートされていません。
その上、そのようなコンテンツを含むVMLオブジェクトをDIV要素と同様に動作させることは非常に複雑です。
グーグルを始めると、さまざまな解決策を見つけることができます。
-
v:textboxwithstyle='mso-fit-shape-to-text:true'は、オブジェクトの高さをコンテンツに必要なサイズに拡張します。 -
v:rect/v:roundrectwithstyle='mso-width-percent:1000;'それについての記事が示唆しているように、これはOutlook2016では機能しませんでした。何かが変わったか、パズルの一部が欠けています。
しかし、何を試しても、一度にすべての機能を適用することはできませんでした。何かがいつもうまくいきませんでした。
v:roundrect丸みを帯びた角は、コンテナーのサイズのパーセンテージで定義されるため、一見意味のある方法で定義したとしても、コンテナーのサイズが変更されると、スケーリングのために角が歪んでしまいます。
うまくいかなかった
そのアプローチで得られる最善の方法をお見せしましょう。私はあなたにもっと良い考えを与えるためにそれを単純化しました：
< p > 1 p > < p > 2 p > < p > 3 p > < p > 4 p > < p > 5 p > < p > 6 p >
[BUTTON CODE] < p > A p > < p > B p > < p > C p > < p > D p > < p > E p > < p > F p >
この例では、次を使用します。
v:roundrectの固定幅の568px。オブジェクトを100％の幅に拡張mso-width-percent適切に機能させることができなかったため。- 丸みを帯びたボタンに関する記事の以前に機能していたボタンコード。
-
v:textboxコンテンツコンテナとmso-fit-shape-to-text:trueを使用して、コンテナの自動高さを確保します。 - コンテナの幅よりも高い高さを生成するのに十分なコンテンツ。
-
arcsize='3%'ほぼ対応する16px/568px我々の所望の境界半径のよう16px。
次の結果が生成されます。
ご覧のとおり、丸みを帯びた角は私たちが期待するものとほぼ同じですが、ボタンは完全に壊れています。これは、VMLオブジェクトのネストがサポートされていないためです。オブジェクトは表示されますが、それらの配置参照フレームはコンテナの上にあります。これにより、ネストされたVMLはシナリオで完全に使用できなくなります。
さらに、 roundrect要素の定義を見ると、 arcsizeプロパティは次のように述べています。「角の丸みを長方形の小さい方の半分のパーセンテージとして定義します。」
これは、十分なコンテンツがなく、コンテナが定義された幅よりも短い場合、丸みを帯びた角が縮小されることを意味します。
動作する混合ソリューション
一般的なコンテナーで機能する実際のソリューションを考え出すには、箱から少し出て、コンテナーが単一のエンティティであるという考えを残す必要があります。
私たちが構築するいくつかの事実を要約しましょう：
- VMLは強力ですが、VMLオブジェクトを使用する場合があるため、内部コンテンツも必要になるため、ラッパーとして使用することはできません。
-
TABLEとTD、一般的なコンテナーとして適切に機能します。
前の記事の境界セルサイズが固定された3x3テーブルレイアウトを覚えていますか？今こそそれを使用し、私たちのニーズに合わせて拡張する時です。
私たちの身体のコンテナは、パディングの持ち24pxとの国境半径16px 。
影付きのボタン、間隔、レイアウトについて学んだことを使用し、コンテナをいくつかの部分に分割します。
計画は次のとおりです。
- 各コーナーセルには、背景と境界線の両方の特定の境界線半径をシミュレートする円弧が含まれます。
- 残りの境界セルは標準セルであり、コーナー間の空きスペースを埋め、必要に応じてそれぞれのサイドボーダーを提供します。
- コンテンツセルのパディングは、コンテナの正しい合計パディングを作成するために、境界線の半径サイズだけ縮小されます。
VMLオブジェクトはOutlookでのみサポートされているため、他の電子メールクライアントのコーナーセルにも標準の境界線の半径と境界線があります。
このアプローチには1つの制限があります。コンテナの内側のパディングは、少なくともその境界半径と同じサイズである必要があります。しかし、これは通常、ほとんどの設計で満たされています。
コーナーの構築
4つのコーナーを持つ完全なコンテナーに到達する前に、特定のコーナーのVMLアークを作成する方法について説明しましょう。
アークにアーク要素を使用しますか？
それは明白な選択のようです。 VMLはアーク要素を提供しますが、予想とは異なる動作をします。これは私が使用したテストコードです。間隔に関する記事からパディングせずに単純なテーブルコンテナに配置して、その動作をよりよく示しています。
次の結果が得られます。
四分の一だけでなく、元の円（ボックスの高さに注意）に100x100px全体を割り当てるだけでなく、両端を中央に接続するのではなく、相互に接続します。コーナー全体をカバーし、セル全体の背景を削除する必要があるため、この場合は使用できません。
日を救うための形状要素！
幸いなことに、SVGと同じように、基本的にすべての形状に使用できる非常に用途の広い形状要素があります。構文だけがSVGとは少し異なります。
私は背景のある左上隅の次のコードを思いついた：
SVGと同様にcoordsize属性とcoordoriginしてローカル座標系を定義するビューボックスがあります。境界の正方形の辺の正確な半分にいくつかの点を配置する必要があるため、2x2のビューボックスを使用しています。
私の道はいつも次のとおりです。
- 円弧の反時計回りの端から開始します。
- 円弧の時計回りの端までのベジェ曲線で、中間点はそれぞれの辺の中央にあります。これにより、1/4円（実際の円弧）が作成されます。
- 円の中心への線。
- そして最後に、その始まりに線を引く形を閉じます。
これは、まさに必要なことを実行する出力です。
丸みを帯びた境界線の作成は非常に似ていますが、いくつかの調整があります。境界線は丸みを帯びた部分でのみレンダリングする必要があるため、パスには円弧を作成する最初の2つのステップのみが含まれ、クロージャーは含まれません。同時に、塗りつぶしの代わりにストロークを使用します。
次の出力で：
標準の電子メールクライアントのコーナー
VMLコーナーについて説明しましたが、これらはOutlookにのみ適用されます。他の電子メールクライアントの場合、CSSプロパティを使用した標準的なアプローチに固執する必要があります。
同じレイアウトを念頭に置いて、それらを各セルに個別に適用するだけです。このようなコーナーセルの例を次に示します。
< td style = 'font-size: 0;margin: 0;padding: 0;margin-top: 0;width: 16px;height: 16px;border-top-left-radius: 16px;background-color: #ff0000' >
td >これにより、OutlookのVMLコーナーとまったく同じ結果が標準の電子メールクライアントで生成されます。一貫した結果を得るには、この2つを組み合わせる必要がありますが、しばらくしてからその状態に戻ります。
完全なコンテナの構築
次に、これらのピースを適用して完全なコンテナーを構築する方法を見てみましょう。
ボーダーのみのコンテナ
丸みを帯びた境界線を使用するには、メール本文に2つの選択肢を提供する必要があります。 1つはVMLオブジェクトを使用し、もう1つは他のクライアント用です。
標準の電子メールクライアントでは、 borderとborder-radius border-radiusサポートしていないため、Outlookで鋭角になります。そのため、どちらか一方を使用するには、条件を追加する必要があります。最初の記事のOutlook以外の電子メールクライアントには、負の条件を使用します。
ここで国境専用コンテナの完全なコードである16px丸い角との合計内部パディング24px ：
<table style='margin: 0;padding: 0;border-spacing: 0;overflow: hidden;' cellspacing='0' cellpadding='0' border='0' width='100%'>
<tbody style='margin: 0;padding: 0;'>
<tr style='margin: 0;padding: 0;'>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,2 c 0,1,1,0,2,0'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-top-left-radius: 16px;border-top: solid 1px #ff0000;border-left: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
<td style='font-size: 0;margin: 0;padding: 0;;border-top: solid 1px #ff0000;'>
</td>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,0 c 1,0,2,1,2,2'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-top-right-radius: 16px;border-top: solid 1px #ff0000;border-right: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
</tr>
<tr style='margin: 0;padding: 0'>
<td style='font-size: 0;margin: 0;padding: 0;padding-top: 8px;padding-bottom: 8px;border-left: solid 1px #ff0000;'></td>
<td style='font-family: Helvetica, sans-serif;font-size: 16px;margin: 0;padding: 8px 8px 8px 8px;font-weight: normal;line-height: 24px;'>
[CONTENT]
</td>
<td style='font-size: 0;margin: 0;padding: 0;padding-top: 8px;padding-bottom: 8px;;border-right: solid 1px #ff0000;'></td>
</tr>
<tr style='margin: 0;padding: 0'>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,2 c 1,2,0,1,0,0'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-bottom-left-radius: 16px;border-bottom: solid 1px #ff0000;border-left: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
<td style='font-size: 0;margin: 0;padding: 0;border-bottom: solid 1px #ff0000;'>
</td>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,0 c 2,1,1,2,0,2'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-bottom-right-radius: 16px;border-bottom: solid 1px #ff0000;border-right: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
</tr>
</tbody>
</table>次の結果が得られます。
標準の電子メールクライアントでは完全に機能しますが、Outlookで気付く可能性のある小さな問題が1つあります。
形状を正確に配置せず、コーナーとその隣接セルの間に小さなスペースを残します。あなたはそれを少し補う必要があるでしょう、しかし私は今のところそれを残して、そして最終的な解決策でそれに戻ります。
背景のみのコンテナ
同じ原則をバックグラウンドのみのコンテナに適用するとどうなるかを見てみましょう。背景のみのコンテナは同じように機能しますが、境界線のCSSプロパティの代わりに、テーブルセルでbackground-color
ここでバックグラウンド専用コンテナの完全なコードである16px丸い角との合計内部パディング24px ：
<table style='margin: 0;padding: 0;border-spacing: 0;border-radius: 16px 16px 16px 16px;overflow: hidden;background-image: linear-gradient(#ffffff, #ffffff)' cellspacing='0' cellpadding='0' border='0' width='100%'>
<tbody style='margin: 0;padding: 0;'>
<tr style='margin: 0;padding: 0;margin-top: 0'>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,2 c 0,1,1,0,2,0 l 2,2 x'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-top-left-radius: 16px;background-color: #ffffff'>
</td>
<!--<![endif]-->
<td style='font-size: 0;margin: 0;padding: 0;background-color: #ffffff'>
</td>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,0 c 1,0,2,1,2,2 l 0,2 x'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-top-right-radius: 16px;background-color: #ffffff'>
</td>
<!--<![endif]-->
</tr>
<tr style='margin: 0;padding: 0'>
<td style='font-size: 0;margin: 0;padding: 0;margin-top: 0;padding-top: 8px;padding-bottom: 8px;background-color: #ffffff'></td>
<td style='font-family: Helvetica, sans-serif;font-size: 16px;margin: 0;padding: 8px;font-weight: normal;line-height: 24px;background-color: #ffffff'>
[CONTENT]
</td>
<td style='font-size: 0;margin: 0;padding: 0;padding-top: 8px;padding-bottom: 8px;background-color: #ffffff'></td>
</tr>
<tr style='margin: 0;padding: 0'>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,2 c 1,2,0,1,0,0 l 2,0 x'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-bottom-left-radius: 16px;background-color: #ffffff'>
</td>
<!--<![endif]-->
<td style='font-size: 0;margin: 0;padding: 0;background-color: #ffffff'>
</td>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,0 c 2,1,1,2,0,2 l 0,0 x'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-bottom-right-radius: 16px;background-color: #ffffff'>
</td>
<!--<![endif]-->
</tr>
</tbody>
</table>それを試すとき、私は意図的に元の電子メールコンテンツを保持したので、VMLオブジェクトでもリッチコンテンツをどれだけうまくサポートしているかがわかります。
以前の境界線のみのソリューションと同様に、形状は少しずれています。すぐに補償します。
境界線と背景を持つ完全なソリューション
解決すべき残りの2つの問題は次のとおりです。
- Outlookの余分なスペースを補います。
- 境界線と背景の両方を持つ角が丸いコンテナを許可します。これは、基本的に同じ場所で2つのVML形状を使用することを意味します。これはおなじみですか？
後者の解決策はすでにわかっています。影をシミュレートする別のVMLオブジェクトの上にボタンを配置したボタンについての記事で説明しました。
両方の問題の解決策は、 position: relativeです。
そこで、背景と境界線の両方の形状を（この順序で）各コーナーセルに配置し、 0.5px調整でそれらを相対的に配置しました。
これは、背景と境界線の両方がサポートされているコンテナの最終的なコードです。この例のために、ボディコンテナに余分な赤い境界線を含めました。
<table style='margin: 0;padding: 0;border-spacing: 0;overflow: hidden;' cellspacing='0' cellpadding='0' border='0' width='100%'>
<tbody style='margin: 0;padding: 0;'>
<tr style='margin: 0;padding: 0;'>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;position:relative;top:0.5px;left:0.5px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,2 c 0,1,1,0,2,0 l 2,2 x'/>
</v:shape>
<v:shape style='width:16px;height:16px;position:relative;top:-0.5px;left:0.5px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,2 c 0,1,1,0,2,0'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-top-left-radius: 16px;background-color: #ffffff;border-top: solid 1px #ff0000;border-left: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
<td style='font-size: 0;margin: 0;padding: 0;background-color: #ffffff;border-top: solid 1px #ff0000;'>
</td>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;position:relative;top:0.5px;left:-0.5px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,0 c 1,0,2,1,2,2 l 0,2 x'/>
</v:shape>
<v:shape style='width:16px;height:16px;position:relative;top:-0.5px;left:-0.5px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 0,0 c 1,0,2,1,2,2'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-top-right-radius: 16px;background-color: #ffffff;border-top: solid 1px #ff0000;border-right: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
</tr>
<tr style='margin: 0;padding: 0'>
<td style='font-size: 0;margin: 0;padding: 0;padding-top: 8px;padding-bottom: 8px;background-color: #ffffff;border-left: solid 1px #ff0000;'></td>
<td style='font-family: Helvetica, sans-serif;font-size: 16px;margin: 0;padding: 8px 8px 8px 8px;font-weight: normal;line-height: 24px;background-color: #ffffff'>
[CONTENT]
</td>
<td style='font-size: 0;margin: 0;padding: 0;padding-top: 8px;padding-bottom: 8px;background-color: #ffffff;border-right: solid 1px #ff0000;'></td>
</tr>
<tr style='margin: 0;padding: 0'>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;position:relative;top:-0.5px;left:0.5px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,2 c 1,2,0,1,0,0 l 2,0 x'/>
</v:shape>
<v:shape style='width:16px;height:16px;position:relative;top:-0.5px;left:0.5px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,2 c 1,2,0,1,0,0'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-bottom-left-radius: 16px;background-color: #ffffff;border-bottom: solid 1px #ff0000;border-left: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
<td style='font-size: 0;margin: 0;padding: 0;background-color: #ffffff;border-bottom: solid 1px #ff0000;'>
</td>
<!--[if mso]>
<td style='margin:0;padding:0;font-size:0;width:16px;height:16px;'>
<v:shape style='width:16px;height:16px;position:relative;top:-0.5px;left:-0.5px;' coordorigin='0 0' coordsize='2 2' fillcolor='#ffffff' stroke='f' fill='true' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,0 c 2,1,1,2,0,2 l 0,0 x'/>
</v:shape>
<v:shape style='width:16px;height:16px;position:relative;top:-0.5px;left:-0.5px;' coordorigin='0 0' coordsize='2 2' strokecolor='#ff0000' strokeweight='1px' stroke='true' fill='f' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word'>
<v:path v='m 2,0 c 2,1,1,2,0,2'/>
</v:shape>
</td>
<![endif]-->
<!--[if !mso]><!-->
<td style='font-size: 0;margin: 0;padding: 0;width: 16px;height: 16px;border-bottom-right-radius: 16px;background-color: #ffffff;border-bottom: solid 1px #ff0000;border-right: solid 1px #ff0000;'>
</td>
<!--<![endif]-->
</tr>
</tbody>
</table>これは、Outlookでの最終出力です。
このソリューションは、シャープな色では完璧ではありませんが、Outlookで得られるものと同じくらい優れています。より柔らかい色で、それは混ざり合います、そして、マイナーな問題はほとんど目立たないです。
この最終的なコードは、この記事に示されているすべての組み合わせをサポートしています。背景または境界線のみが必要な場合は、それぞれの形状とCSSを削除するだけです。このようなソリューションを開発する際に留意する必要があることを示すために、両方を示しました。
これは、背景だけを使用した、標準の電子メール本文の外観です。
そして、これが私たちがボーダーと背景を組み合わせて同じものを使用する方法です。これは、次の記事の1つを確認しているときに、同僚によってトリガーされた実際の電子メール通知からのものです。
他の可能な、しかし効果のない解決策
私が検討した他の潜在的な解決策がありましたが、それらのどれも「正しく感じられなかった」または望ましい結果を提供しませんでした：
ピクセルごとのレイアウト
各ステップが1つのピクセルで表されるテーブルを想像してみてください。それらを適切に整理し、セルに適切な色を割り当てることにより、基本的にHTML要素を使用してビットマップをレンダリングします。
動作しますが、Excelでモナリザを描画するのと同じように感じます。私が効率的な解決策と考えるものではありません。
ただし、このピクセルごとのレイアウトについて詳しく知りたい場合は、この記事をお読みください。
コーナー画像
コーナーのVMLオブジェクトで使用したのと同様のアプローチを使用できますが、今回は画像を使用します。使用できる組み合わせを事前に準備した画像に制限するだけでなく、メールの基本に関する記事で概説した制限もあります。
私が言わなければならないのはそれだけです
最後まで一緒にいてくれてありがとう！私の調査結果があなたに役立ち、あなたの電子メール開発に役立つことを願っています。ソリューションについて話し合ったり、経験を共有したりしたい場合は、Discordに参加してください。
いくつかのトピックを見逃した場合のために、メールの再設計に関する以前のすべての記事へのリンクを以下に示します。
- 2021年の電子メールの実装：生成された電子メールの基本とテスト方法
- 2021年の電子メールの実装：Outlookで機能する影付きの丸いボタン
- 2021年の電子メールの実装：Outlookで機能する垂直方向の配置でインラインタグを作成する方法
- 2021年の電子メールの実装：テーブルの間隔と垂直方向の配置に関するOutlookの詳細
- 2021年の電子メールの実装：Outlookのコンテナーに丸みを帯びた角を追加する方法
楽しんで！
