<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/10/htmlinstant.jpg" alt="オンラインHTMLエディタ" title="htmlinstant" width="514" height="204" class="aligncenter size-full wp-image-16326" /></p>
<p>Dreamweaverなどの専用ソフトがあれば事足りますが、そういった環境がない場合に、HTMLソースの出来栄えを確認したいことだってありますよね。</p>
<p>今回はそんなとき、オンラインでHTML編集でき、かつリアルタイムにプレビューできるエディタをご紹介します。</p>
<!--more-->
<h3 class='header-label'>リアルタイムにプレビューできるオンラインHTMLエディタ「HTML Instant」</h3>
<p>「<a href="http://www.htmlinstant.com/" target="_blank">HTML Instant </a>」は、<strong>HTMLタグを記述すると、その場でリアルタイムにプレビューを表示するオンラインHTMLエディタ。</strong></p>
<p>リッチテキストエディタにもなっているので、タイピングすることなくHTMLタグを挿入したり、画像を掲載（URL指定）することもできます。</p>


<h4 class='tips'>リアルタイムにHTMLソースをプレビュー</h4>
<p><img src="http://web-marketing.zako.org/images/2010/10/htmlinstant1.jpg" alt="リアルタイムプレビュー" title="htmlinstant1" width="400" height="263" class="aligncenter size-full wp-image-16327" /><br />↑画面左側にHTMLソースを書きこむと、右側へリアルタイムにデザインが反映されます。</p>

<h4 class='tips'>リッチテキストエディタでサクサクHTMLタグ挿入</h4>
[caption id="attachment_16328" align="aligncenter" width="400" caption="「HTML Editor」ボタン"]<img src="http://web-marketing.zako.org/images/2010/10/htmlinstant2.jpg" alt="HTMLエディター" title="htmlinstant2" width="400" height="139" class="size-full wp-image-16328" />[/caption]
[caption id="attachment_16329" align="aligncenter" width="400" caption="HTMLタグ挿入ボタン"]<img src="http://web-marketing.zako.org/images/2010/10/htmlinstant3.jpg" alt="RTE" title="htmlinstant3" width="400" height="93" class="size-full wp-image-16329" />[/caption]
<p>↑編集部分下部にある「HTML Editor」ボタンを押すと、編集部分上部にHTMLタグ挿入のボタンが表示されます。たとえばPタグを挿入するときは、段落のテキストを選択してボタンを押せば、選択部分がPタグで囲まれます。</p>

<p><img src="http://web-marketing.zako.org/images/2010/10/htmlinstant4.jpg" alt="画像" title="htmlinstant4" width="400" height="206" class="aligncenter size-full wp-image-16330" /><br />↑また、画像の挿入も画像URLの指定で可能になっています。</p>

<p>興味のある方は<a href="http://www.htmlinstant.com/" target="_blank">HTML Instant </a>へどうぞ。</p>
<p>私が初めてHTMLをいじったときは、Dreamweaverやホームページビルダーのような編集ソフトも持っていなかったので、テキストエディタでうんうん唸りながら覚えていったものですｗ</p>
<p>そのとき、こんなツールがあったら相当便利だったでしょうね。</p>

<p>Via:<a href="http://www.delicious.com/url/7d493ee7137ac16ba5e0d3b0df65c68a" target="_blank">delicious</a></p>
