CSSインライン
CSSインラインは何のために使うのか
メールクライアントはブラウザのタブではありません。Gmail、Outlook、Yahoo!メール、スマホの標準メールアプリなどは、`<link rel="stylesheet">` を無視したり、`<head>` 内の `<style>` を削ったりする挙動がまちまちです。比較的どこでも再現されやすいのは、各タグの `style` 属性に書いた見た目です。 CSS Inliner（CSSインライナー）は、Web制作と同じく「HTMLは構造、CSSは見た目」の分け方を保ったまま、マッチした宣言を要素へコピーするツールです。Mailchimp、Benchmark、自社配信基盤へ渡すファイルはHTMLのままでも、別ファイルのスタイルシートに依存しなくなります。 このページは配信直前の仕上げ用です。左でHTMLとCSSを分けて編集（または2ファイルをまとめてインポート）、「CSS をインライン化」を実行し、右の出力を確認。問題なければコピー・ダウンロード、または「HTML をプレビュー」でトップのPlaygroundに送ってレイアウトをクリック確認してからテスト配信してください。
外部CSSもHTML内のstyleも、どちらも入力として扱う
よくあるオンラインツールは、CSSがすでにHTMLに入っている前提です——デザインツールから出した `<style>` だけを書き換えるパターン。ところが実務では `template.html` と `styles.css` に分かれていることが普通で、ビルド成果物、Figma渡し、静的サイトジェネレーターなどから来るケースが多い。毎回手で結合するか、年に数回しか使わないCLIを入れるのは負担になります。 当ツールは外部の.cssとHTML内の `<style>` を同列に扱います。HTMLタブにマークアップ、CSSタブにルール。`.html` と `.css` を同時にインポートすることもできます。CSSタブのルールは、HTMLに残っている `<style>` と一緒に適用され、出力は各要素の `style` 属性を持つHTML文字列です。インライン済みの `<style>` タグは除去される——多くのESPが期待する形です。 ニュースレターでもトランザクションメールでも同じです。ボタンやタイポは共通CSSに置き、HTML断片は担当者ごとに分かれている。アプリからモジュールをコピーし、デザインシステムのスタイルシートを足す——こうした流れでは、HTMLに埋め込まれたCSSしか読めないインライナーでは足りません。
処理はページ読み込み後のブラウザ内だけ。アカウント不要、アップロードもありません。`:hover` や `::before` などインライン化できないルールはスキップし、出力上の「メモ」に列挙します。単純な `@media` は展開を試みますが、受信トレイでのレスポンシブはWebと一致しないので、必ず実クライアントへテストメールを送ってください。 余白やクラス漏れを目視したいときは「HTML をプレビュー」でインライン結果をトップのPlaygroundへ。サイト共通のHTML/CSS/JSプレビュー環境で、ESPに貼る前にテーブル幅などを確認できます。
CSSインライナーを開くHTMLタブ＋CSSタブ
リポジトリで2ファイルに分ける感覚のまま編集。仕上がったらインライン化して配信用HTMLに。
2ファイルまとめて読み込み
.html と .css を一度に取り込み、貼り付け時の欠損や順序ミスを減らします。
トップでプレビュー
インライン後のHTMLを新しいタブのPlaygroundへ送り、視覚確認してからESPへ。
外部スタイルシートにも対応するメール用CSSインライン
HTML内に<style>がある場合だけを処理するツールが多い中、別途の.cssファイルとマークアップ内のstyleの両方を一度にインライン化。コピー・ダウンロード・プレビューまで同じ画面で。
外部.cssをそのまま渡せる
`email.css` と `template.html` を並べて管理しているなら、インポートするか2タブに貼るだけ。セレクタに合う宣言が各要素の `style` に書き込まれます——受信側が最も読みやすい形式です。インライナーの都合で、先にスタイルシートをHTMLへ手動マージする必要はありません。HTML内の `<style>` ブロックも同じパスで処理するので、共通head＋モジュールbodyのテンプレートもワンクリックです。 右パネルは読み取り専用の全文出力。ヘッダーのアイコンでコピー、ツールバーから `inlined.html` を保存、「HTML をプレビュー」でトップPlaygroundへ。変換はすべてローカルです。
- CSS専用タブで実プロジェクト構成に対応
- 外部CSS＋埋め込みstyleを一括インライン
- スキップルールをメモ表示
- ローカル処理・アップロードなし
メールHTMLテンプレートのCSSインライン手順
HTMLとCSSを入れる
テンプレートをHTMLタブへ。ボタン・見出し・ユーティリティはCSSタブへ。または .html と .css を同時インポート。headに<style>が残っていてもそのままインライン化の対象です。
「CSS をインライン化」を実行
マッチしたスタイルがstyle属性に反映されます。メモでスキップ項目を確認。左は編集可能、右で結果を見ながらやり直せます。
確認して配信
コピー・保存、またはプレビューでトップPlaygroundを確認。ESPに貼り、GmailやOutlookへテスト送信。承認版.htmlを残しておくと安心です。
CSSインライン FAQ
次の配信、インラインは済ませましたか？
HTMLを貼り、外部または埋め込みのCSSを足し、インライン化。テスト受信と見比べてから保存・コピー。
CSSインライン
- 外部 .css と HTML を同時処理
- HTML内 <style> もまとめてインライン
- トップ Playground でプレビュー
- No signup; use the tool in the browser
インライン後は必ず実配信テスト——プレビューだけでは足りません。
ESP用HTMLを1本に
一度インライン化し、キャンペーンへ貼り、承認版を保管。