CSSをインラインにするやつ
HTMLの<style>を各要素のstyle属性に変換します。
使い方
1. HTMLを入力する
上部のエディタに <html>...</html>
形式のHTMLを貼り付けます。<style>
タグを含めることができます。
<html> <head> <style> h1 { color: blue; } </style> </head> <body> <h1>Hello!</h1> </body> </html>
2. 「インライン化」ボタンをクリック
Juiceライブラリにより、style="..."
が各要素に自動的に追加されます。
3. 結果を活用
- コピー:クリップボードに結果を保存
- ダウンロード:
inlined.html
として保存 - ハイライト表示:読みやすい色付きコード表示
💡 利用例
- HTMLメール(Gmail/Outlookなど)の作成
- CSSを含んだテンプレートの簡素化
- 共有・埋め込み用のHTML整形
⚠️ 注意点
:hover
や@media
はインライン化されません<link rel="stylesheet">
は対象外です- JavaScriptとの連動はありません
🔒 プライバシー
入力内容は保存されず、変換処理はサーバー上で即時実行されます。