開発者向け
2021年の電子メールの実装：Outlookで機能する影付きの丸いボタン
By Martin Hejtmanek
丸みを帯びたボタンと影はCSS3にとって簡単な作業です。しかし、フォーマットされた電子メールでborder-radiusとbox-shadowを使用できますか？
この記事は、2021シリーズの電子メールの実装の一部です。紹介を見逃した場合は、2021年の電子メールの実装：基本と生成された電子メールをテストする方法をお読みください。
このパートでは、再設計された電子メールのCTA（召喚）ボタンと、設計要件に一致するようにそれらを実装する方法について説明します。
このようなボタンの一般的な使用法は次のようになります。
複雑なことは何もありません：境界線の半径、中央に配置されたテキスト、およびいくつかの影。 CSSの3行。問題は、Outlookがそれをサポートしていないことです。
彼らはインターネットであなたに何を教えていますか？
Outlook用に角が丸いボタンを作成することは最近では珍しいことではありません。あなたのためにボタンコードを生成するウェブサイトさえあります。はじめに素晴らしいです！
これらのソリューションは通常、影のないプレーンなボタンのみを提供します。それでは、そこから始めて、後でシャドウを追加しましょう。
注：上記のソリューションに触発されたOutlook用のVMLボタンを使用しました（これから説明します）。ただし、考慮すべき他のオプションもあります。
防弾メールボタンの構造
いつものように、Outlook用、次に他の電子メールクライアント用のコンポーネントバリアントが必要です。
ボタンの場合は、かなり標準的なCSSプロパティを使用してリンクを作成することから始めます。これは、標準のHTMLレンダリングエンジンを備えた電子メールクライアントで期待するとおりにレンダリングされます。ロケット科学はありません。
< a href = 'https://app.kontent.ai/gotoaction' style = 'font-family: Helvetica, sans-serif;font-size: 14px;margin: 0;padding: 0 24px;color: #ffffff;margin-top: 0;font-weight: bold;line-height: 40px;letter-spacing: 0.1ch;text-transform: uppercase;background-color: #DB3C00;border-radius: 5000px;box-shadow: 0 8px 14px 2px #f45c2324, 0 6px 20px 5px #f45c231f, 0 8px 10px -5px #f45c2333;display: inline-block;text-align: center;text-decoration: none;white-space: nowrap;-webkit-text-size-adjust: none' > Open subscription details a >ほとんどの電子メールクライアントでは正常に表示されますが、Outlookでは次の不完全なビューが表示されます。
Outlookで適切な背景を提供するには、リンクを条件付きv:roundrect VMLオブジェクトでラップして、角が丸い適切な背景領域を与える必要があります。追加のトップレベルDIVはデフォルトの間隔をリセットし、すぐに必要になる参照フレームを提供します。
結果のコードは、上記のボタンジェネレーターが生成するものと似ています。
< div style = 'font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;margin-top: 0' >
< a href = 'https://app.kontent.ai/gotoaction' style = 'font-family: Helvetica, sans-serif;font-size: 14px;margin: 0;padding: 0 24px;color: #ffffff;margin-top: 0;font-weight: bold;line-height: 40px;letter-spacing: 0.1ch;text-transform: uppercase;background-color: #DB3C00;border-radius: 5000px;box-shadow: 0 8px 14px 2px #f45c2324, 0 6px 20px 5px #f45c231f, 0 8px 10px -5px #f45c2333;display: inline-block;text-align: center;text-decoration: none;white-space: nowrap;-webkit-text-size-adjust: none' > Open subscription details a >
div > Outlookと他の電子メールクライアントの設計をどのように連携できるかに注目してください。通常、他のクライアントを強化するための標準プロパティを備えた通常のHTMLから始めて、
それに関する問題は、VMLが単色の影しかサポートしていないことです。グラデーションの影はありません。そして、結果は次のようになります（色は別として）。正確に必要なものではありません：
ダブルシャドウを設定しようとしましたが、うまくいきませんでした。それは機能しませんでした。Outlookが完全なVML仕様に準拠しておらず、その一部にすぎないことを示す良い例です。
では、他にどのようなオプションがありますか？それは常に非常に単純なHTMLとCSS、画像、またはVMLのいずれかです。
ボックスの外側を考え、影をシミュレートします
ボタンの下にきれいな形のグラデーションを追加する方法があった場合はどうなりますか？それは素晴らしい影の効果になりますか？私たちが持っているオプションを見てみましょう...
標準のHTMLでは、絶対位置を使用するだけで済みます。しかし、いいえ、電子メールクライアントはそれをサポートしていません。
対処する必要のあるさまざまなトピックに関する大量の記事を読んだ後、VMLに関する公式のアーカイブされたMicrosoftドキュメントに出くわしました。
重要な要素はposition: relative position: absoluteと同様に動作しますが、VMLオブジェクトの場合のみです。これは、 topとleft合わせて、「テキストの前に配置」やそれぞれの位置などのMSWordの形状機能に変換されると思います。
これを使用して、複数の形状を重ねて配置できます。残っている唯一の問題は、ボタンをその上に配置して、ボタンの影のように見えるものをどのようにレンダリングするかです。
VML仕様に戻り、実際にグラデーションをサポートしている要素を検索しました。
gradientradialタイプを使用fill別の角丸長方形を作成しました。少し実験と磨きをかけた後、シャドウをレンダリングするために次のコードを作成しました。
グラデーションの形状はボタン自体よりも少し大きく、そのフォーカス（フルカラーのデフォルト領域）はボタンの外側に届かないように設定されていますが、すべての場所で可能な限り最も一貫したシャドウを適用します。
影の微調整は一番上の桜であり、それは特定のデザインに依存します。
最後のステップは、すべてを組み合わせるということです。ただし、実装には最後の問題が1つあります。ボタンの下に影を配置する必要があります。つまり、ボタンを相対的な位置にする必要があります。そうしないと、ボタンが影の下に表示されます。ただし、すべてを相対化すると、ボタンに必要なスペースを割り当てるオブジェクトはありません。そこで、垂直方向のスペースを割り当てるために、標準のインライン位置とボタンの高さを持つ別のv:rect
これが私の最後のボタンコードです。かなり小さな機能ですが、Outlook用のコードがたくさんあります。しかし、それは機能し、それが重要です！
< div style = 'font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;margin-top: 0' >
< a href = 'https://app.kontent.ai/gotoaction' style = 'font-family: Helvetica, sans-serif;font-size: 14px;margin: 0;padding: 0 24px;color: #ffffff;margin-top: 0;font-weight: bold;line-height: 40px;letter-spacing: 0.1ch;text-transform: uppercase;background-color: #DB3C00;border-radius: 5000px;box-shadow: 0 8px 14px 2px #f45c2324, 0 6px 20px 5px #f45c231f, 0 8px 10px -5px #f45c2333;display: inline-block;text-align: center;text-decoration: none;white-space: nowrap;-webkit-text-size-adjust: none' > Open subscription details a >
div >そして、これが最終結果のようになります。 Outlook用の影付きのボタンを開発することができました！
そのようなボタンを使用するいくつかのキャッチはありますか？
キャッチがなければ、Outlookではありません。 OutlookとVMLは、グラデーションの透明度をサポートしていません。
つまり、実際に表示されるのは、物理的にtransparent色ではなく、オレンジから白へのグラデーションです。
また、 position: relativeはドキュメント内にスペースを割り当てないため（通常のHTMLの絶対位置と同じように）、ネガティブを十分に使用しないと、この方法で配置したオブジェクトが他の要素を簡単にオーバーフローする可能性があることも意味します。スペース。
透明度の欠如とオーバーフローを組み合わせると、シャドウオブジェクトが他の方法では隠されている非透明度を公開するという奇妙な状況が発生する可能性があります。このような：
したがって、この制限を念頭に置いて、間隔とシャドウサイズを注意して設計してください。
次は何ですか？
グラデーションシャドウを使用して素敵なボタンを作成する方法を示し、デザインがもたらす制限について説明しました。このソリューションはうまく機能しますが、一般的なサイズのコンテナーには対応できません。これらについては、別の記事で詳しく説明します。
これは、2021年の一連の記事「電子メールの実装」の第2部でしたが、まだ学ぶべきことがあります。あなたが最も興味を持っていることに基づいてこれらの記事の1つを続けるか、シリーズ全体を読んでください：
- 2021年の電子メールの実装：生成された電子メールの基本とテスト方法
- 2021年の電子メールの実装：Outlookで機能する影付きの丸いボタン
- 2021年の電子メールの実装：Outlookで機能する垂直方向の配置でインラインタグを作成する方法
- 2021年の電子メールの実装：テーブルの間隔と垂直方向の配置に関するOutlookの詳細
- 2021年の電子メールの実装：Outlookのコンテナーに丸みを帯びた角を追加する方法
次の記事では、インラインコンテンツに丸みを帯びた角を適用する方法を紹介します。これは、この場合、ワークフロータグとメンションを意味します。
