<p class="thumb"><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml.png" alt="Word文書を綺麗なHTMLタグに変換" width="500" height="278" class="alignnone size-full wp-image-27545" /></p>
<p>Wordで作成した文書をリッチテキストエディタに貼り付けて、ウェブサイトを作成している人もまだまだいらっしゃると思います。</p>
<p>しかし、Wordをそのままリッチテキストエディタに貼り付けると、どうしても綺麗とはいえないHTMLになってしまいます。そんなデメリットを解決してくれるツールを、今回はご紹介します。</p><!--more-->
<h3 class="header-label">Word文書を綺麗なHTMLタグに変換する「word2cleanhtml」</h3>
<p>「<a target="_blank" href="http://word2cleanhtml.com/">word2cleanhtml.com</a>」は、<strong>Wordの文書をクリーンなHTMLに変換してくれるオンラインツール。</strong></p>
<p>コピーしてそのままリッチテキストエディタなどに貼り付けると、不要なタグが多く含まれてしまうWord文書のテキストを、きれいなHTMLタグにしてくれます。</p>

<h4 class="tips">Wordに含まれるゴミタグを除去</h4>
<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml1.png" alt="word2cleanhtml1" width="500" height="209" class="alignnone size-full wp-image-27544" /><br />Wordに書いたテキストをリッチテキストエディタに貼り付けると、画像のように不要なタグが大量に入ってしまいます。これでは無駄にファイル容量を増やしてしまうだけで、何のメリットもありません。</p>

<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml2.png" alt="word2cleanhtml2" width="670" height="211" class="alignnone size-full wp-image-27543" /><br />word2cleanhtmlを使うと、このように無駄なものをすべて除去して、きれいなHTMLにすることができます。</p>

<h4 class="tips">コピーアンドペーストしてボタンを押すだけ</h4>
<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml3.png" alt="word2cleanhtml3" width="500" height="387" class="alignnone size-full wp-image-27542" /><br />きれいなHTMLに変換するには、まずWordで書いた文書をコピーして、word2cleanhtmlに貼り付けます。</p>

<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml4.png" alt="word2cleanhtml4" width="500" height="173" class="alignnone size-full wp-image-27541" /><br />つぎに、オプションを選択します。ここは特に変える必要はないと思いますが、「Convert &lt;b&gt; to &lt;strong&gt;, &lt;i&gt; to &lt;em&gt;」にチェックが入っていると、太字をstrongに変換するので、太字を多用している場合はこのチェックを外したほうが良いです。</p>

<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml5.png" alt="word2cleanhtml5" width="500" height="203" class="alignnone size-full wp-image-27540" /><br />そして【convert to clean html】ボタンを押せば、変換されます。</p>


<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml6.png" alt="word2cleanhtml6" width="500" height="297" class="alignnone size-full wp-image-27539" /><br />変換が完了すると、綺麗になったHTMLが表示されます。この画面ではWordが吐き出したHTMLを確認する「Original HTML」と、綺麗になったHTMLの見た目をプレビューできる「view」を見ることができます。</p>

<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml7.png" alt="word2cleanhtml7" width="500" height="298" class="alignnone size-full wp-image-27538" /><br />これがプレビューで見たところ。<b>文字色は引き継がれません</b>が、見出しや強調などが綺麗に反映されています。HTMLをコピーするときは、画像右下に見える「Copy HTML to clipboard」をクリックします。</p>

<p><img src="http://cdn.zako.org/images/2013/12/word2cleanhtml8.png" alt="word2cleanhtml8" width="500" height="300" class="alignnone size-full wp-image-27537" /><br />すると、HTMLをコピーする画面が開くので、ここでCtrl + c を押してコピーし、貼り付けたい場所へ貼り付ければ完了です。</p>

<p>興味があるかたは<a target="_blank" href="http://word2cleanhtml.com/">word2cleanhtml.com</a>へどうぞ。</p>