広告が嫌いですか? 行く広告なし今日 

CSSメールインライン（スタイル属性インライン）

開発者文章

広告削除する？

入力

自動処理

出力

クライアント側

広告削除する？

ガイド

CSSメールインライン（スタイル属性インライン）

HTMLにブロックを含むものを、すべてのCSSルールをインラインスタイル=\"\"属性に移すことで、メールに適したマークアップに変換します。メールクライアントはブロックを削除または無視するため、インライン化がGmail、Outlook、Yahoo、Apple Mailなどすべてのメールクライアントでデザインを維持するための唯一の確実な方法です。

左側の入力欄に完全なHTMLを貼り付けます。ツールはすべてのセレクタを解析し、ブラウザが行うようにCSSの特異性を正確に解決し、それぞれのマッチする要素に勝利する宣言を書き込みます。:hoverや@mediaクエリなどの擬似クラスルールは、まだサポートされているメールクライアントがそれらを必要としているため、残りのブロックに保持されます。

使用方法

HTMLを入力欄に貼り付けます — 完全なドキュメントまたはブロックを含むフラグメント。
メディアクエリや擬似クラスルールを保持するかどうかを決定します（レスポンシブメール向けに推奨）。
スタイルがインライン化された後、クラス属性をオプションで削除します。
読みやすさまたはコンパクトさを好み、インライン出力の表示をオンまたはオフに切り替えます。
インライン化されたHTMLをコピーまたはファイルとしてダウンロードし、そのままメールサービスプロバイダーに貼り付けます。

機能

特異性を考慮したマージ – ID、クラス、属性、要素タイプをブラウザのカスケードと正確に解決します。
!important処理 – 外部の!important宣言は、標準CSS仕様に従って、通常のインラインスタイルを上回ります。
メディアクエリの保持 – レスポンシブ@mediaルールが保持され、モバイルブレークポイントが正常に動作します。
擬似クラスのフォールバック – :hover、:focus、::beforeルールはインライン化できません。ツールはそれらを簡易なブロックに保持します。
複数のブロック – 複数のスタイルタグを持つドキュメントを処理します <head> または <body>.
オプションのクラス削除 – 重複するクラス=\"\"属性を削除し、軽量なパッケージにします。
読みやすい出力 – インデントされた読みやすいHTMLまたはコンパクトな1行出力。
100%クライアントサイド – あなたのHTMLはブラウザ内でしか存在せず、アップロードやサーバー処理は一切ありません。

広告削除する？

 よくある質問

HTMLメールはなぜCSSをインライン化する必要があり、スタイルブロックを使う必要がないのですか？

多くのメールクライアント——特に古いバージョンのOutlookやいくつかのウェブメールプロバイダー——は、ヘッダー要素を完全に削除するか、メッセージをサンドボックス化し、外部および埋め込みスタイルを無視します。各要素にインラインスタイル属性を持つことが、すべての主要なメールクライアントが尊重する唯一の宣言形式であるため、Gmail、Outlook、Yahoo、Apple Mailで同じように見えるデザインを実現するためにはインライン化ステップが必須です。
CSSの特異性とは何ですか？インライン化においてカスケード順序がなぜ重要ですか？

特異性は、セレクタがID、クラス、属性、擬似クラス、要素タイプに基づいて与えられる重みです。同じプロパティを同じ要素に適用する2つのルールがある場合、ブラウザは特異性の高いルールの値を保持し、引き分けはソース順序で決まり、後にあるルールが勝ちます。インライン化ツールは、そのアルゴリズムを宣言ごとに再現しなければ、低特異性のルールが高特異性のルールを上書きし、デザインが静黙的に変化する可能性があります。
!importantフラグはインラインスタイルとどのように相互作用しますか？

標準カスケードでは、インラインスタイルは作者スタイルシートよりも高い出発点に位置しているため、通常はクラスや要素レベルのルールを上回ります。!importantフラグはその1つの例外です：作者スタイルシートからの!important宣言は、非重要インライン宣言を上回ります。そのため、クラスに白色を!importantで指定したボタンは、要素にstyle=\"color: blue\"が設定された場合でも白色で表示されます。
:hoverや::beforeなどの擬似クラスルールはなぜインライン化できませんか？

スタイル属性は、その要素に存在する条件付きの宣言を保持します。擬似クラスルールは状態（hover、focus、checked）を表し、擬似要素は生成コンテンツを表し、実際のDOMノードに紐づけられません。これらの概念にはインライン形式が存在しないため、インライン化ツールはそれらをサポートするメールクライアントの小さなサブセットに残す必要があります。
@mediaクエリはインライン化プロセス中にどうなりますか？

メディアクエリは条件付きルールで、ビューポートが制約を満たす場合にのみ宣言が適用されます。スタイル属性は条件付き適用を表現できませんので、メディアクエリはスタイルブロック内にそのまま保持されなければなりません。レスポンシブメールデザインはmin-widthやmax-widthクエリを用いてモバイルでのレイアウトを切り替えますので、それらを削除するとレスポンシブ動作が完全に失われます。