オンラインCSSインライナー

CSSインライナーでできること

CSSインライナーは、HTML文書内のスタイル情報を各要素のインラインstyle属性に変換するツールです。これにより、メールクライアントなど外部スタイルシートをサポートしない環境でも、意図したスタイルが適用されやすくなります。

具体的な使用例

次のようなHTMLを入力したとします。

<style>p{color:red}</style><p>Hello</p>

変換後、段落要素には style="color: red;" が追加され、style要素は削除されます（チェックボックスがオンの場合）。出力はdoctypeで始まる完全な文書としてシリアライズされます。

処理の仕組み

ブラウザがHTMLを解析し、すべてのstyle要素のテキストと追加CSSを連結します。次に、中括弧で囲まれた単純なセレクタブロックを検出し、一致する要素に宣言を適用します。無効なセレクタはスキップされます。

制限事項

この変換は軽量であり、CSSのカスケード、詳細度、メディアクエリ、キーフレーム、擬似要素、ネストCSS、外部リンクされたスタイルシート、計算済みスタイルを完全には実装しません。また、ブラウザがHTMLを解析する際に正規化する場合があります。外部スタイルシートやリモートアセットは読み込まれません。

注意点

このツールはサニタイザーや互換性テスターではありません。出力を実際のメールクライアントやブラウザで確認し、視覚的なレンダリングが意図どおりかどうかを確認してください。

よくある質問

Q1: 変換後にstyle要素が残っているのはなぜですか？

「style要素を削除」チェックボックスがオフになっている可能性があります。デフォルトではオンですが、オフにするとstyle要素が出力に残ります。

Q2: メディアクエリや擬似要素はサポートされますか？

いいえ、このツールは単純なセレクタのみを処理します。メディアクエリ、擬似要素、キーフレームなどは無視され、インライン化されません。

Q3: 外部CSSファイルをリンクしている場合はどうなりますか？

外部リンクされたスタイルシートは読み込まれません。追加CSSとしてテキストを貼り付けるか、style要素内にスタイルを記述してください。

チェックリスト

• 入力HTMLが500,000文字以内であることを確認
• 追加CSSが必要かどうかを確認
• style要素を削除するかどうかを選択
• 変換後に出力をコピーして実際の環境で表示確認