<p class="thumb"><img src="http://web-marketing.zako.org/images/2011/05/cascader.jpg" alt="インラインCSSのHTMLをCSSファイルと分割する「Cascader」" title="cascader" width="514" height="204" class="aligncenter size-full wp-image-17987" /></p>
<p>とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。</p>
<p>しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。</p>
<p>今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。</p><!--more-->
<h3 class='header-label'>インラインCSSのHTMLをCSSファイルと分割する「Cascader」</h3>
<p>「<a class='web-site-link' href="http://www.cascader.co/" target="_blank">Cascader</a>」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。</p>
<p>ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。</p>

<h4 class='tips'>HTMLタグを貼り付けるだけで分割</h4>
<p><img src="http://web-marketing.zako.org/images/2011/05/cascader1.png" alt="インラインCSSで書かれたHTML" title="cascader1" width="500" height="331" class="aligncenter size-full wp-image-17985" /><br />↑たとえば、画像のようにインラインCSSでいろいろと指定されているようなテーブルを、Cascaderに貼り付けてみると。</p>

<p><img src="http://web-marketing.zako.org/images/2011/05/cascader2.png" alt="貼りつけるだけで分割" title="cascader2" width="500" height="397" class="aligncenter size-full wp-image-17986" /><br />↑このように、あっという間にHTMLとCSSファイルを綺麗に分割してくれます。これは便利。</p>

<p><img src="http://web-marketing.zako.org/images/2011/05/cascader3.png" alt="インラインCSSをclassに置き換える" title="cascader3" width="500" height="401" class="aligncenter size-full wp-image-17984" /><br />↑結構適当に変換されてしまうのかと思いきや、ちゃんと中身を解析してclassを割り当ててくれるようです。</p>

<p>試してみたいかたは<a class='web-site-link' href="http://www.cascader.co/" target="_blank">Cascader</a>へどうぞ。</p>

<p>手作業の場合、たとえ一括置換したとしても、一定のルールを探す時間が発生するので、ここまでカンタンにできてしまうと本当に助かりますね。</p>