<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/05/htmleditor.png" alt="" width="592" height="299" class="alignnone size-full wp-image-30946" /></p>
<p>デザインは得意だけれども、HTMLコーディングはどうしても不得手だ、という方も多いのではないでしょうか。あるいは、文章を書いていて、ライター脳をコーダー脳に切り替える気がないときに、手軽にHTMLタグを生成したいというケースもあるはず。</p>
<p>今回ご紹介するのは、リッチテキストエディタ（WYSIWYGエディタ）を使ってHTMLタグを生成するオンラインツールです。</p>
<!--more-->

<h3 class="header-label">リッチテキストエディタでHTMLコーディングできる「HTML Editor」</h3>
<p>「<a target="_blank" href="https://htmleditor.io/">HTML Editor</a>」は、リッチテキストエディタで整形したものをHTMLタグへリアルタイムに変換できるオンライン エディタ。</p>
<p>HTMLコーディングが苦手な人のみならず、文章を書きながら部分的にちょっとしたHTMLを生成したいという場合にも重宝できそうなものになっています。</p>

<h4 class="tips">リアルタイムに整形した文章をHTML化</h4>
[caption id="attachment_30945" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/htmleditor-cording.png" alt="" width="592" height="300" class="size-full wp-image-30945" /> 左側で文章を書いて整形し、右側にHTMLタグを生成。[/caption]
<p>画面の左側がエディタになっていて、そこで整形した文章を、右側にHTMLタグで生成していってくれます。</p>
<p>若干無駄な直書きスタイルが入ってしまうものの、気になるようであれば一括置換で消せそうなレベルです。</p>

[caption id="attachment_30943" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/htmleditor-table.png" alt="" width="592" height="340" class="size-full wp-image-30943" /> テーブルの挿入。[/caption]
<p>テーブルや見出しなどといった要素の挿入や変換も、メニューから選択しておこなうことができます。</p>
<p>部分的にはなりますが、ショートカットキーも用意されています。（ただしブラウザで設定しているショートカットキーと競合してしまうのでご注意を。）</p>

[caption id="attachment_30944" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/htmleditor-embed.png" alt="" width="592" height="348" class="size-full wp-image-30944" /> 動画の埋め込みタグ挿入。[/caption]
<p>動画の埋め込みタグを挿入し、サイズを変更すると言った操作もGUIでおこなえます。</p>

<h4 class="tips">ちょっとしたHTML生成にも便利</h4>
[caption id="attachment_30947" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/05/htmleditor-list.png" alt="" width="592" height="142" class="size-full wp-image-30947" /> 箇条書きからリストタグを生成。[/caption]
<p>文章を書いていて、リストタグを作りたいといったようなときにも、リストを貼り付けて数回アクションするだけでリストタグを生成できます。</p>

<p>興味がある方は<a target="_blank" href="https://htmleditor.io/">HTML Editor</a>へどうぞ。</p>

