CSS入力

インラインスタイルスニペット

CSSをインラインの例

CSSルールをメールやHTML用のstyleインラインスニペットに変換します。例：

見出しとボタンのスタイル

CSS入力：

入力

インラインスニペット出力：

出力

上のサンプルでさらにサンプルデータを読み込めます。

CSSをインラインとは？

インラインスタイルはHTML要素のstyle属性です。メールクライアント、一部のCMS、フレームワークは外部スタイルシートを削除または無視するため、インラインスタイルを要求します。このツールはCSSルールをstyle="..."インラインスニペットに変換し、HTMLに貼り付けられます。W3C CSS仕様がソース形式を定義しています。

変換は完全にブラウザ内で行われます。サーバーには何も送信されません。出力はHTML用に準備されています。完全なメールHTMLのインライン化（セレクターと要素のマッチング）には、Juiceなどの専用ツールを使用してください。このツールはCSSルールからスタイルスニペットを生成します。

このツールの使い方

CSSを貼り付けまたはアップロード

CSSをコピーして左のエディターに貼り付けます。アップロードをクリックして.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なCSSはエラーを表示します。

インラインスニペットを確認

右のパネルに各ルールのスタイルスニペットが表示されます。各スニペットはHTML要素に追加できる<code>style="..."</code>文字列です。セレクターがリストされ、どの要素にどのスタイルが適用されるか分かります。

コピーまたはダウンロード

コピーまたはダウンロードを使用してください。スニペットをHTMLに貼り付けます。まずCSSをフォーマットするにはCSSフォーマッターを、ミニファイにはCSSミニファイアーを使用してください。

変換の仕組み

ツールはCSSルールを解析し、各宣言ブロックをstyle="property: value; ..."文字列に変換します。セレクターがリストされ、どのスニペットがどの要素に適用されるか分かります。出力はHTMLのstyle属性の構文に従います。完全なHTML+CSSのインライン化（セレクターと要素の自動マッチング）には、JuiceやCan I Emailなどのツールがメールクライアントのサポートを文書化しています。

CSSをインラインが役立つ場面

メールHTMLが最も一般的なユースケースです。Gmail、Outlook、多くのクライアントは<style>タグと外部スタイルシートを削除します。インラインスタイルがメールをスタイリングする最も確実な方法です。ここでCSSを変換すると<td>、<div>などの要素に追加するスニペットが得られます。

CMS、PDFジェネレーター、HTMLは受け付けるがCSSファイルは受け付けないレガシーツールは、インラインスタイルが必要なことが多いです。ここで変換すると期待される形式が得られます。インライン化前にベンダープレフィックスを追加するにはCSSプレフィクサーを。まずCSSをフォーマットまたはミニファイするにはCSSフォーマッターまたはCSSミニファイアーを使用してください。

よくある質問

完全なHTMLにインライン化しますか？

このツールはCSSルールからスタイルスニペットを生成します。HTMLを解析したり要素にスタイルを適用したりしません。完全な変換（HTML+CSSをインラインスタイル付きHTMLに）には、Juiceなどのツールを使用してください。

データはプライベートですか？

はい。変換は完全にブラウザ内で行われます。データはサーバーに送信されません。

疑似クラスは？

:hoverや::beforeなどの疑似クラスはインライン化できません。インラインスタイルは静的プロパティのみサポートします。ベーススタイルに使用してください。メールクライアントはhover用に限定的な<style>をサポートする場合があります。

メディアクエリは？

メディアクエリはインライン化できません。インラインスタイルは要素ごとです。レスポンシブメールにはハイブリッドアプローチ：ベーススタイルをインラインに、サポートされる場合はメディアクエリ用に<style>を使用してください。

詳細度と継承は？

インラインスタイルは詳細度が高いです。要素にスニペットを貼り付けると、他のほとんどのスタイルを上書きします。複数のルールが同じ要素に適用される場合は順序が重要です。

CSSをインラインに