ホーム / 開発者ツール / オンラインCSSインライナー
無料オンラインツール

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

単純な入れ子のない CSS ルールをインライン化します。同じ要素に異なるセレクターが一致する場合は明示的に拒否します。処理はブラウザ内でローカルに行われます。

使ってみる

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

単純な入れ子のない CSS ルールをインライン化します。同じ要素に異なるセレクターが一致する場合は明示的に拒否します。

ブラウザーが HTML と CSS を解析し、すべての style 要素のテキストの後に追加 CSS を連結します。同じセレクターのルールはソース順に累積します。元のインライン宣言のインライン優先順位を維持し、!important を考慮します。style タグを削除しても残しても、結果は doctype で始まる完全な文書です。

入れ子のないスタイルルールだけを変換します。同じ要素に異なるセレクター文字列が一致すると、詳細度を推測せずエラーで停止します。@ ルールや入れ子 CSS を含むルールは展開しません。疑似要素、計算済みスタイル、外部スタイルシートは変換しません。無効な CSS の破棄や HTML の正規化はブラウザーの処理に従います。

各エディターは最大 500000 UTF-16 コード単位です。一致した全要素のルール文字列、区切り、元のインライン文字列の処理量は合計 4000000 UTF-16 コード単位までで、シリアライズ後の出力も同じ上限です。超過時は HTML 要素または CSS 宣言を減らしてください。任意の入力に対する性能を保証する上限ではありません。

貼り付けた CSS をローカルで変換し、外部スタイルシートは取得しません。結果はテキストであり、プレビュー、ダウンロード機能、HTML サニタイザーではありません。スクリプトや危険なマークアップは削除しません。使用前にコードを確認し、対象ブラウザーやメールクライアントで検証してください。表示の一致は保証しません。

<style>p{color:red}</style><p>A</p>
→ <p style="color: red;">A</p>

処理はブラウザ内でローカルに行われます。