メールのインラインスタイル
メールクライアント間で表示を統一するためCSSをインラインで適用します
「メールのインラインスタイル」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
インラインスタイルを使う理由
多くのメールクライアント、特に2016年5月以前のGmailウェブ版や、現在も存在する複数のモバイルアプリは、<style>ブロックや外部スタイルシートを削除または書き換えます。インラインのstyle="..."属性だけが、すべてのクライアントで確実に維持されるCSSです。
外部CSSで作成し、インライン化して配信する
インラインスタイルを手作業で記述するのは保守できません。通常の<style>タグとクラス名を使ってメールを作成し、ビルド時にインライナー（Juice、Premailer、mjml）を実行して、配信前に各ルールを対応する要素のstyle属性へコピーしてください。
詳細度が優先される
インラインスタイルは、!importantを除けば最も高い詳細度を持ちます。インライン値を上書きするメディアクエリでは、すべてのプロパティに!importantを使用する必要があります。そうしないと、@mediaのコンテキストに関係なくインライン宣言が優先されます。
@media (max-width: 600px) {
.col {
width: 100% !important;
display: block !important;
}
}インライナーは@mediaに触れない
インライナーがコピーするのは個々の要素に一致するルールだけです。@mediaブロックは平坦化できないため、<style>タグ内に残ります。これは問題ありません。Gmailなどの除去処理を行うクライアントはインラインスタイルをそのまま残し、<style>タグに対応するクライアントはその上にメディアクエリを適用します。
省略記法を避ける
一部のクライアントでは省略記法によって問題が発生します。font: 14px/1.4 Arialは完全に無視される場合があります。各プロパティが個別に機能するか失敗するよう、長い形式（font-family、font-size、line-height）を使用してください。
colorとbackgroundを必ず設定する
多くのクライアントでは、ダークモードが色を自動的に反転します。テキストコンテナにcolorとbackground-colorを明示的に設定すると、黒い背景に黒いテキストが表示されるような重大な問題を防げます。必ず両方を組み合わせてください。
長さの単位
サイズ指定にはpxを使用してください。rem、vh、vwは、クライアントによって対応が異なります。テーブルでは全幅レイアウトにパーセンテージを使用できます。内側のテーブルやセルには絶対値のピクセル幅を指定すると、すべてのクライアントで同じように表示されます。
フォント: Webセーフなフォントスタック
@font-face によるWebフォントは Apple Mail、iOS Mail、Thunderbird では動作しますが、Outlook と Gmail では動作しません。インラインの値にはWebセーフなフォントスタック（Arial、Helvetica、sans-serif）を使用し、@font-face は対応クライアント向けのプログレッシブエンハンスメントとしてのみ使用してください。
背景画像と Outlook
div のインライン background-image は最新のクライアントでは動作しますが、Outlook では無視されます。フォールバックとして bgcolor を使用し、Outlook 向けには条件付き VML の <v:rect> を使用してください。完全な再現が不可能な場合でも、すべてのクライアントで視覚的に同等の背景が表示されます。
実際のクライアントでテストする
インラインスタイルはブラウザーのプレビューでは正しく見えても、Gmail、Outlook、iOS Mail では異なって表示されることがあります。キャンペーンを送信する前に、Litmus、Email on Acid、または無料の Mailtrap プレビューを使用して、主要な各クライアントで確認してください。
スタイルをリセットする
<style> タグに小さなリセット（body の margin: 0、table の line-height: 100%、画像の border: none）を追加して、クライアントのデフォルトスタイルを無効化してください。<style> が適用される環境だけに適用したい場合は、メディアクエリで囲んでください。
理解度チェック
HTMLメールのメディアクエリでは、なぜすべてのプロパティに !important が必要なのでしょうか。
まとめ
メールでは、クライアントによるスタイルの除去に耐えるためにインラインスタイルが必要です。ただし通常は <style> に記述し、ビルド時にインライン化します。メディアクエリ内ではインラインスタイルより優先させるために !important を使用し、省略記法よりもロングハンドのプロパティを優先してください。color と background-color は明示的に設定し、単位には px を使用し、送信前に実際のクライアントでテストしてください。
よくある質問
「メールのインラインスタイル」レッスンは無料ですか？
はい。「メールのインラインスタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「メールのインラインスタイル」で何を学びますか？
メールクライアント間で表示を統一するためCSSをインラインで適用します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「メールのインラインスタイル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。