あなたのコードをテストするための7つの最高の無料オンラインHTMLエディター

あなたのコードをテストするための7つの最高の無料オンラインHTMLエディター

使用するすべてのWebサイトはHTMLに依存しています。 Web開発者はJavaScript、Python、CSS、およびサーバーサイドスクリプトのスキルを必要としますが、HTMLはそれをすべてまとめています。





HTMLがなければ、Webは存在しないため、HTMLを作成および編集する方法を知っておく必要があります。コンピューターにHTMLコードテストシステムをセットアップするよりも、ブラウザーでコードをテストする方が簡単です。





小さなHTMLスニペットをいじる場合でも、完全なWebサイトプロジェクトをいじる場合でも、オンラインHTMLエディターが理想的です。





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

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

  • オンラインHTMLエディターはWebブラウザーで直接実行されます
  • HTMLコードをオンラインでテストします---コードが期待どおりに実行されるかどうかを確認します
  • リアルタイムのWebプレビューを表示---編集するとプレビューが更新されます
  • ワークフローを合理化する---保存、ブラウザへの読み込み、エディタへの切り替え、繰り返しは不要です
  • プラットフォームにとらわれない--- Web接続のある任意のデバイスで実行されます。

この最後の点は非常に重要です。これは、PC上でChromebookと同じくらい簡単にWebページを開発できることを意味します。 Androidタブレット、またはRaspberryPiのような50ドルのコンピューターを使用することもできます。



HTMLコーディングは、プログラミングと開発を理解するためのアクセス可能で直接的なゲートウェイです。あなたは常にあなたのHTMLコードをテストする必要があります---あなたのブラウザウィンドウでのライブ結果より何が良いですか?

現在利用可能な最高のオンラインHTMLエディターのいくつかを見てみましょう。





1.1。 CodePen

CodePenは、Web開発者向けの「ソーシャル開発環境」です。つまり、基本的には、コラボレーション機能を備えたオンラインエディターです。シンプルなレイアウトです。 HTML用のパネル、CSS用のパネル、JavaScript用のパネルに加えて、リアルタイムプレビュー用のパネルがあります。すべてのパネルサイズは、エッジをドラッグすることで調整できます。

Webコードを微調整するための個々の遊び場のような「ペン」を作成できます。複数のペンを1つのコレクションにグループ化できます。





基本的な使用へのサインアップは無料ですが、プライベートペンとコレクションには プロアカウント 。これは月額8ドルからで、アセットホスティング、埋め込み可能なテーマ、リアルタイムコラボレーション、CodePenの完​​全なWeb開発IDEへのアクセスが含まれます。

多くの人がCodePenを最高のオンラインHTMLエディターと考えています。それがあなたのニーズに合っているかどうか確かめるためにそれを試してみてください。

2.2。 JSFiddle

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

必要に応じて、JavaScriptを完全にスキップできます。

JSFiddleの優れている点は、サイドバーに外部リクエストを追加できることです。これにより、HTMLを拡張するためのオフサイトのJavaScriptファイルとCSSファイルを含めることができます。また、コードのインデントを自動的にクリーンアップするTidyボタンも便利です。また、[コラボレーション]をクリックすると、リアルタイムのオンラインコラボレーションが可能になります。

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

3.3。 JSBin

JSBinは、JSFiddleのよりシンプルでクリーンな代替手段と考えてください。パネルと上部のツールバーを切り替えるだけで、HTML、CSS、JavaScriptの任意の組み合わせを編集できます。最大限の柔軟性を得るために、必要に応じてプレビューパネルとコンソールパネルを切り替えることもできます。

スナップチャットでより多くの縞を取得する方法

ただし、JSFiddleでは外部のCSSリソースとJavaScriptリソースをリンクできますが、JSBinでは事前定義されたJavaScriptライブラリに制限されています。ただし、jQueryからReact、Angularなど、さまざまな選択肢があります。

JSBinは無料でアカウントは必要ありませんが、 プロアカウント 高度な機能について。これらには、プライベートビン、カスタム埋め込み、アセットホスティング、Dropbox同期、JSBinを通じて公開されたページのバニティURLが含まれます。

四。 Liveweave

Liveweaveは、以前のエディターと視覚的に似ていますが、快適なユーザーインターフェイスを備えています。 JSFiddleと同様に、Liveweaveではリアルタイムコラボレーションが可能であり、JSBinと同様に、jQueryなどの事前定義されたサードパーティリソースにリンクできます。

しかし、それはいくつかのユニークな機能も持っています。 Lorem Ipsum Generatorは、現在のカーソル位置にプレースホルダーテキストを作成します。 CSS ExplorerはCSSスタイルを作成するためのWYSIWYGツールを提供し、ColorExplorerは完璧な色を選択するのに役立ちます。一方、ベクターエディターを使用すると、サイトのベクターグラフィックを作成できます。

Steamの払い戻しを依頼する方法

5.5。 HTMLhouse

HTMLhouseは、HTMLのみに関心がある場合(つまり、CSSやJavaScriptを使用しない場合)に適したオプションです。クリーンで最小限で、左側が編集、右側がリアルタイムプレビューで垂直に分割されます。

便利なのは、HTMLを公開して、プライベート(プライベートURL経由)またはパブリック(に追加)で共有する機能です。 HTMLhouseの参照ページ )。これはシンプルですが効果的であり、まさにオンラインHTMLエディターが活躍し優れているところです。

HTMLhouseは、次の人々によって作成および保守されていることに注意してください。 Write.as 、気を散らすことのないオンラインライティングツール。あなたがあなた自身のサイトコンテンツを書くことを計画しているならば、これを覚えておいてください。

6.6。 HTMLG

別のオプションHTMLGは、HTMLのコードペインとプレビューペインを使用するのと同じパターンに従います。ただし、このツールには、同じ統合プロジェクト内にCSSとJavaScriptが含まれていません。むしろ、それらを編集したい場合は、新しいタブを開いて、別々のプロジェクトとして編集する必要があります。

これにより、ブラウザでの純粋なHTMLの調整やコードのテストに最適です。 CSS編集を組み込みたい場合はそれほどではありません。

HTMLGを使用して完全なWebページをテストする場合は、300語の制限があることに注意してください。これを増やすには、月額わずか5.80ドルから、広告なしのプレミアムバージョンにサインアップできます。

7。 ダブレット

Dabbletは、オンラインHTMLエディターでわずかに異なる見方を提供し、画面を3つまたは4つのペインではなく2つのペインに分割します。つまり、HTMLと結果のビューと、CSSと結果の別の(ただしリンクされた)ビューがあります。

これにより、より多くのスペースが提供され、コードとプレビューがより明確に表示されます。さらに、組み込みのw3.org HTMLおよびCSSバリデーターは、問題を浮き彫りにします。

サイトコードをテストするために明確なデスクトップスペースが必要な場合は、これが最適なHTMLエディターである可能性があります。

最高のオンラインHTMLエディターを使用してスキルを向上させる

HTMLへの唯一の露出が10年前に学んだことである場合、今が追いつく時です。 HTML5は2014年にリリースされ、いくつかの新しい標準と機能が導入されました。どこから始めればよいかわからない?これらの重要な新しいHTML5要素を確認してください。

HTML5 Webデザインと開発のグッドプラクティスを学びたいですか?これらを確認してください 高品質のHTMLコーディング例を備えたWebサイト 。また、Web開発スキルをアップグレードするためのこれらの他のツールも確認する必要があります。

共有 共有 つぶやき Eメール 知っておくべき15のWindowsコマンドプロンプト(CMD)コマンド

コマンドプロンプトは依然として強力なWindowsツールです。これは、すべてのWindowsユーザーが知っておく必要のある最も便利なCMDコマンドです。

次を読む
関連トピック
  • プログラミング
  • テキストエディタ
  • ウェブ開発
  • WYSIWYGエディター
  • HTML5
  • スクリプティング
著者について クリスチャンコーリー(1510件の記事が公開されました)

セキュリティ、Linux、DIY、プログラミング、技術の説明を担当する副編集長であり、デスクトップとソフトウェアのサポートに豊富な経験を持つ本当に便利なポッドキャストプロデューサーです。 Linux Formatマガジンの寄稿者であるクリスチャンは、ラズベリーパイのいじくり回し、レゴ愛好家、レトロゲームファンです。

クリスチャンコーリーのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください