ウェブ開発者は、JavaScript、Python、CSS、サーバーサイドスクリプティングなどのスキルを必要としますが、HTMLはそれらすべてを統合しています。

HTMLがなければWebは成り立たないので、その作成・編集方法を知っておく必要があります。コンピュータにHTMLコードのテストシステムを構築するよりも、ブラウザでコードをテストする方が簡単です。

小さなHTMLスニペットから完全なウェブサイトプロジェクトまで、オンラインHTMLエディタは理想的です。

オンラインhtmlエディタを使用する理由

ブラウザベースのHTMLエディタを使用することは、以下の理由から、メモ帳++のようなツールを使用するよりも理にかなっています。

• ウェブブラウザ上で直接動作するオンラインHTMLエディタ
• HTMLコードをオンラインでテストする - コードが期待通りに動くかどうかを確認する
• ページのライブプレビューを表示 - 編集中にプレビューが更新されます。
• ワークフローの簡素化 - 保存、ブラウザでの読み込み、エディタへの切り替えを繰り返す必要はありません。
• プラットフォームに依存しない - ネットワーク接続が可能なデバイスであれば、どのようなデバイスでも動作します。

この最後のポイントは非常に重要です。つまり、PCでウェブページを開発するのと同じように、Chromebookでウェブページを開発することも容易に想像できるのです。Androidタブレットや、Raspberry-Piのような50ドルのコンピュータを使うこともできます。

HTMLコーディングは、プログラミングや開発について理解するための、身近でわかりやすい方法です。HTMLコードを常にテストする必要があります。その結果をリアルタイムでブラウザウィンドウに表示することができれば、これほど素晴らしいことはありません。

それでは、現在入手可能な最高のオンラインHTMLエディタを見てみましょう。

1 コードペン

CodePenは、Web開発者のための「ソーシャル開発環境」であり、基本的にはコラボレーション機能を備えたオンラインエディタであることを意味します。シンプルなレイアウトを実現しています。HTML用のパネル、CSS用のパネル、JavaScript用のパネル、そしてライブプレビュー用のパネルが用意されています。すべてのパネルは、サイドをドラッグしてサイズを変更することができます。

ウェブコードをいじるための個人的な遊び場のような「ペン」を作成し、複数のペンを1つのコレクションにまとめることができます。

基本的な利用は無料で登録できますが、プライベートなペンやコレクションを利用する場合は、プロフェッショナルアカウントが必要です。月額8ドルから利用でき、アセットホスティング、埋め込み可能なテーマ、ライブコラボレーション、CodePenのフルWeb開発IDEへのアクセスなどが含まれます。

多くの人がCodePenを最高のオンラインHTMLエディタだと考えています。

2Jブリッジ

JSFiddleは、まさにその名の通り、JavaScriptをいじることができるサンドボックスで、ご存知のようにHTMLやCSSと密接に関係しています。つまり、JSFiddleでは、JSFiddleの編集インターフェースを使って、この3つを一度に編集することができるのです。

必要であれば、JavaScriptは完全に省略することができます。

JSFiddleは、サイドバーに外部からのリクエストを追加できるのがメリットです。また、「Tidy」ボタンをクリックすると、コードのインデントが自動的に解除され、「Collaborate」をクリックすると、ライブでオンラインコラボレーションが可能になります。

唯一の欠点は、プレビューパネルを更新するために実行ボタンをクリックする必要があることです。

III.ジャスピン

JSBinは、JSFiddleに代わる、よりシンプルでクリーンな選択肢とお考えください。上部のツールバーのトグル・パネルを使うだけで、HTML、CSS、JavaScriptを自由に組み合わせて編集することができます。また、必要に応じて、プレビューパネルとコンソールパネルを切り替えて使用することも可能です。

しかし、JSFiddleが外部のCSSやJavaScriptのリソースにリンクできるのに対し、JSBinは定義済みのJavaScriptライブラリに限定されます。jQueryからReact、Angularなど、選択肢は豊富ですが。

JSBinは無料でアカウントを必要としませんが、プレミアム機能にはProアカウントが必要です。プライベートビン、カスタムエンベッド、アセットホスティング、Dropbox同期、JSBinで公開されたページのバニティURLなどです。

4 生体組織

Liveweaveは、視覚的に従来のエディタと似ており、心地よいユーザーインターフェイスを備えています。JSFiddleと同様、Liveweaveはリアルタイムのコラボレーションを可能にし、JSBinと同様、jQueryなどの定義済みのサードパーティリソースにリンクすることができます。

CSSブラウザは、CSSスタイルを作成するためのWYSIWYGツールを提供し、カラーブラウザは、完璧な色を選択するのに役立ちます。一方、ベクターエディターでは、サイト用のベクターグラフィックを作成することができます。

5htmlhouse Inc.

HTMLにしか興味がない（つまりCSSやJavaScriptを使わない）のであれば、HTMLhouseは良い選択だと思います。クリーンでミニマルなデザインで、左側に編集、右側にライブプレビューと縦に分割されています。

便利なのは、HTMLを公開し、個人的に（プライベートURLで）、または公に（HTMLhouseの閲覧ページに追加して）共有できることです。シンプルだけど効果的、そこでオンラインHTMLエディターの出番、秀逸なんです。

HTMLhouseは、非侵入型のオンラインライティングツールであるwrite.asを利用していますので、ご注意ください。これからホームページのコンテンツを作成される方は、この点にご留意ください。

6htmlg Inc.

もう一つの選択肢であるHTMLGは、同じパターンで、HTML用のコードとプレビューペインを使用します。ただし、このツールでは、CSSとJavaScriptは同じ統一プロジェクトに含まれず、編集する場合は、新しいタブを開いて別々の項目として編集する必要があります。

このため、ブラウザ上で純粋にHTMLを調整したり、コードをテストしたりするのに理想的です。CSSの編集を統合したい場合は、そうではありません。

HTMLGを使用してウェブページ全体をテストする場合、300語の制限があることにご注意ください。これに加え、月額5.80ドルから無料のプレミアムバージョンに登録することができます。

7 ダブリング

Dabbletは、画面を3つ/4つのペインではなく、2つに分割した、少し変わったオンラインHTMLエディタを提供しています。そのため、HTMLと結果を表示するビューと、CSSと結果を表示するビューを別々に（ただしリンクして）持つことになります。

これにより、コードやプレビューをより分かりやすく表示するためのスペースが確保されます。さらに、内蔵のw3.org HTML and CSS Validatorは、あらゆる問題を浮き彫りにします。

サイトのコードをテストするためにきれいなデスクトップスペースが必要な場合、これはおそらくあなたのための最高のHTMLエディタです。

最高のオンラインhtmlエディタでスキルを向上させる

もしあなたがHTMLに触れる機会が10年前に学んだものだけなら、そろそろキャッチアップする時期です。 HTML5は2014年にリリースされ、多くの新しい標準と機能が導入されました。何から始めたらいいのかわからない？これらの重要なHTML5の新要素をご覧ください。

HTML5のWebデザイン・開発のグッドプラクティスを学びたい方。質の高いHTMLコードの例が掲載されているウェブサイトをご覧ください。この他にも、Web制作のスキルを高めるためのツールをご紹介しています。