メールのCSSをインライン化する
Outlook といくつかのWebメールは <style> ブロックを無視するか削除します。インライン化は、ブラウザで動くデザインと受信箱で動くデザインのあいだにある、退屈で機械的な一手間です。
- すべてブラウザ内で処理
- オフライン対応
- アップロードなし
- 登録不要
- 透かしなし
ツールを読み込み中…
使い方
- <style> ブロックを含むHTMLを貼り付けます。
- 「CSSをインライン化」を押します。
- 結果をコピーまたはダウンロードし、下のプレビューで確認します。
アップロードが不要な理由
このページの処理はすべて、ブラウザのタブ内で動くコードが行います。ファイルはディスクからタブのメモリに読み込まれ、その場で変換され、ダウンロードとして書き出されます。当社にも第三者にも送信されません。
ご自身で確認する方法
- ブラウザの開発者ツール（F12）を開き、「ネットワーク」タブを選びます。
- ファイルを読み込んでツールを実行します。
- 表示されるのは、ツール自身のコードの読み込みと、一部の重いツールでは公開CDNからのエンジン取得、それに loreatec.jp への小さなアクセス集計（ページのアドレスとタイトルだけ）です。あなたのファイルを運ぶ通信は1つもありません。
よくある質問
なぜメディアクエリはインライン化できないのですか？
インラインスタイルには条件が付けられず、常に適用されるからです。メディアクエリは条件そのものなので、<style> ブロックにしか置けません。レスポンシブなメールに両方が必要なのはこのためです：基本デザインはインライン、スマートフォン向けは <style>。<style> を削除するクライアントでは基本デザインが表示される、と割り切ります。
:hover はどうなりますか？
同じ問題で、同じ答えです。<style> ブロックに残ります。ホバー効果は、対応しているクライアントへのおまけと考えてください。メッセージがそれに依存してはいけません。
元からあったインラインスタイルとスタイルシート、どちらが勝ちますか？
あなたのものです。すでに style 属性にあるものは保持され、スタイルシート由来の規則のあとに置かれるので、引き続き上書きします。ブラウザと同じ挙動です。
配信ツールがやってくれることと同じですか？
多くのツールは送信時にインライン化します。これは、HTMLを他社に渡すとき、APIで送るとき、ある規則がなぜ生き残らなかったかを調べるときのためのものです。