CSS メール インライナー
CSS <style> ブロックルールを、一致する各 HTML タグの style 属性にインライン化します。ほとんどのメールクライアントが <style> タグを削除する HTML メール用です。シンプルなタグ、クラス、ID、タグ+クラスセレクタをサポートします。子孫コンビネータ、疑似クラス、特異性カスケードはありません。
入力
When off, rules this tool can't inline are dropped instead of preserved.
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-email-inliner \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"htmlInput": "<style>p { color: red; }</style><p>Hello</p>",
"keepUnsupportedRules": "true",
"removeClassAttrs": ""
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-email-inliner` tool (CSS Email Inliner) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-email-inliner/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS メール インライナー — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールの機能
ほとんどのメールクライアント（Gmail、Outlook、その他多くのクライアント）は、HTML メールをレンダリングする際に <style> ブロックと <head> コンテンツを削除するか、予測不可能な方法で無視します。確実に残る唯一の CSS は、各要素に style="..." 属性として直接書き込まれた CSS です。「CSS インライン化」は、通常の <style> ブロックで書き込まれたルールを取得して、それらが一致する各要素の宣言をコピーするプロセスです。これにより、スタイルシートのサポートに依存せず、メールがどこでも正しくレンダリングされます。
このツールは、<style> ブロックを含む HTML を貼り付けると、各一致するタグを解決された宣言を含むインライン style 属性を使用して書き直し、元の <style> ブロックを削除（または必要に応じて保持）します。
正直な範囲：シンプルセレクタのみ
完全な CSS セレクタエンジン（子孫コンビネータ（div p）、子/兄弟コンビネータ（div > p、p + span）、疑似クラスと疑似要素（a:hover、p::first-line）、属性セレクタ（[href]）、特異性ベースのカスケード解決）は、クエリするための実際のブラウザ DOM なしでは本当に難しい解析問題です。このツールは同形に動作し（ブラウザ、サーバー、API）、利用可能な DOM パーサーがないため、意図的にこれらのいずれも試行しません。
生の HTML ソースのパターンベースのスキャンに一致する機能は以下の通りです：
- タグセレクタ —
p、td、h1 - クラスセレクタ —
.button - ID セレクタ —
#header - タグ + クラスセレクタ —
p.intro
スタイルシートのその他の要素（子孫セレクタ、疑似クラス、属性セレクタ、サポートされおよびサポートされていない形式を混在させたカンマリスト）は「サポートされていない」として分類され、デフォルトでは、サイレントに削除または一致しない代わりに、出力の上部にある <style> ブロックに保持されます。出力に <style> ブロックを持たせたい場合は、これをオフにしてください。
また、特異性カスケードはありません。2 つ以上のサポートされたルールが同じ要素と一致する場合、スタイルシートで後に表示されるルールが、タグ、クラス、または ID セレクタであるかどうかに関わらず、それらが両方設定するプロパティの勝者となります。実際のブラウザは ID セレクタをクラスセレクタの上に、クラスセレクタをタグセレクタの上に重み付けします。このツールはそうしません。要素の既存の style="..." 属性は常に保持され、スタイルシートから引き出されたすべてのものよりも常に優先されます。
メールテンプレートが子孫セレクタ、疑似クラス、または正確な特異性解決に依存している場合は、ビルドツール ベースのインライナーを使用してください。juice または Premailer はどちらも完全なセレクタエンジンを実装し、複雑なスタイルシートに最適な選択肢です。
使い方
<style>ブロックを含む HTML を入力ボックスに貼り付けます。- **「サポートされていないルールを保持」**にチェックを入れたままにして、このツールがインライン化できないメディアクエリ、疑似クラスルール、その他のセレクタを出力の上部にある
<style>ブロックに保持します（ほとんどのメールクライアントはメディアクエリをサポートしている場合、そこに配置された<style>ブロックを読み込みます）。チェックを外すと完全に削除されます。 - **「クラス属性を削除」**をチェックして、スタイルがインライン化された後に出力から
class="..."を削除します。一部のインボックスは外部クラス名を参照し続けるメールにフラグを立てるため便利です。 - 出力パネルから結果の HTML をコピーまたはダウンロードします。
入力を編集すると、出力は自動的に更新されます。
FAQ
このツールはメール テンプレート全体を正しく処理しますか？
タグ、クラス、ID、タグ+クラスルールの一般的なケースを正しく処理します。スタイルシートが子孫セレクタ、疑似クラスを使用している場合、または特異性カスケードに依存してルール間の競合を解決する場合、このツールは推測する代わりにそれらのルールを <style> ブロックに残すため、送信前に出力を確認してください。上記の範囲セクションを参照してください。
@media クエリはどうなりますか？
インライン化することはできません（メディアクエリは単一の要素に関連付けられていません）。「サポートされていないルールを保持」がチェックされている場合、出力の <style> ブロックに残されます。一部のメールクライアント（特に Apple Mail および新しいバージョンの Outlook/Gmail）は、他のスタイルを削除した後でもメディアクエリの <style> ブロックを読み込みます。これはこのツールが削除する代わりにそこに保持する理由です。
要素に既に style="..." 属性がありました。どうなりますか？
保持され、スタイルシートからインライン化されたすべてのものよりも常に優先されます。これは、実際のブラウザがスタイルシート ルールよりもインライン スタイルを優先する方法と一致しています。
HTML を検証または修正しますか？ いいえ。これはベストエフォート変換であり、HTML バリデータではありません。形式が悪い入力では、ガベージ出力またはエラーを生成する代わりに、HTML を変更されていないまま返すようにフォールバックします。
プライバシー
このツールはお使いのブラウザ内で完全に実行されます。HTML（埋め込まれたリンク、追跡ピクセル、パーソナライズされたコンテンツを含む）がサーバーにアップロードされることはありません。