CSSをHTMLにインライン化してくれるWEBサービス「HTML email inline styler」

CSSをHTMLにインライン化してくれるWEBサービス「HTML email inline styler」

CSSをHTMLにインライン化してくれるWEBサービス「HTML email inline styler」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

HTML email inline stylerは、HTML内の<style>~</style>に記述したCSSをインライン化してくれるWEBサービスです。ページのURLを指定するか、ソースを入れるだけで一瞬でインライン化してくれます。

スポンサードリンク

HTML email inline stylerの使い方

HTML email inline stylerにアクセスして、ページのURLもしくはページのソースを入力します。

HTML email inline stylerの使い方

[Convert]をクリックすると、「Converted HTML」にインライン化されたHTMLが表示されます。

インライン化されたHTML

試しに、以下のようなHTMLをインライン化してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-family: sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
line-height: 1;
-webkit-font-smoothing: antialiased;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
p{
line-height: 1.6;
margin: 1em 0;
}
a{
text-decoration:none;
transition: all .3s ease-in-out;
}
a img{
transition: all .3s ease-in-out;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
a:hover img{
opacity: 0.7;
}
img{
max-width: 100%;
vertical-align: bottom;
border: none;
outline: none;
}
ol, ul{
list-style: none;
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Test</p>
<a href="index.html"><img src="sample.png" alt=""></a>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div> 
</div>
</body>
</html>

これが、以下のように変換されます。

<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body style="font-family: sans-serif;font-size: 15px;margin: 0;padding: 0;line-height: 1;-webkit-font-smoothing: antialiased;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
<div class="container">
<div class="content">
<p style="line-height: 1.6;margin: 1em 0">Test</p>
<a href="index.html" style="text-decoration: none;transition: all 0.3s ease-in-out"><img src="sample.png" alt="" style="transition: all 0.3s ease-in-out;-webkit-backface-visibility: hidden;backface-visibility: hidden;max-width: 100%;vertical-align: bottom;border: none;outline: none"/></a>
<ul style="list-style: none;list-style-type: none">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div> 
</div>
</body>
</html>

あとがき

HTMLメールを作成したい時に活用できますね。ブラウザ上でHTMLメールが作成できる「Topol.io」というサービスもありますので、併せてチェックしてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。