2021年の10の最高の無料オンラインHTMLエディターとテスターツール

10 best free online html editors

この有益なレビューとトップオンラインHTMLエディターおよびテスターツールの比較を読んで、要件に最適なHTMLエディターを選択してください。

HTMLコードエディタは、コードの記述に役立つエディタです。 HTMLファイルは、メモ帳などの単純なテキストエディタを使用して作成できます。

ただし、HTMLコードエディタを使用すると、コードの支援、タグの「閉じ角かっこ」の追加、強調表示と色分けが役立ちます。強調表示と色分けは、ファイルの更新時に役立ちます。 HTMLコードエディタはタイピング速度を向上させます。

WYSIWYGはあなたが見るものはあなたが得るものの略です 。これらのエディターを使用すると、HTMLコーディングの知識があまりなくてもWebページで作業できます。結果ページでコンポーネントを変更すると、エディターがそれをコードに反映するか、エディターが同じコードを作成します。これらのエディターは、リアルタイムの結果と、この結果ページを更新するためのドラッグアンドドロップ機能を提供します。

HTMLコードエディタの一般的な機能は次のとおりです。

• オートコンプリート。
• HTMLエンティティのライブラリを追加します。
• サイトエクスプローラーを使用すると、ファイルを階層パターンで表示できます。
• 一部のエディターには、ファイルをより高速にアップロードするためのFTPが組み込まれています。
• 高度なHTMLエディターは、CSSやJavaScriptなどの他の言語のサポートを提供します。
• ほとんどのエディターは分割画面ビューを提供します。これは、コードの出力を画面の半分に表示し、実際のコードを画面の残りの半分に表示するのに役立ちます。ウィンドウを切り替える必要はありません。
• 機能の検索と置換。この機能は、HTMLコードエディタに従って進めることができます。高度な機能を使用すると、特定のファイル内または完全なWebサイトから特定の単語またはキーワードを検索できます。
• もう1つの重要な機能は、構文エラーを強調表示することです。

多くのオンラインHTMLコードエディタが利用可能です。これらのエディターは、ソフトウェアのインストールと環境のセットアップの必要性をスキップします。また、これらのエディターのほとんどは、基本的な機能を無料で提供します。また、より高度な機能については、いくらかのお金を払う必要がありますが、それはオプションであり、ニーズによって異なります。

学習内容：

• トップHTMLエディター/テスターのリスト
  • 最高のHTMLエディタの比較
  • ＃1）JSFiddle
  • ＃2）JSビン
  • ＃3）Adobe Dreamweaver
  • ＃4）Codepen
  • ＃5）CoffeeCup
  • ＃6）KompoZer
  • ＃7）BlueGriffon
  • ＃8）CKEditor
  • ＃9）小冊子
  • ＃10）CSSDeskHTMLエディター
  • その他のオンラインHTMLエディター
• 結論
  • 推奨読書

トップHTMLエディター/テスターのリスト

1. JSFiddle
2. JSビン
3. Adobe Dreamweaver
4. Codepen
5. コーヒーカップ
6. KompoZer
7. BlueGriffon
8. CKEditor
9. ダブレット
10. CSSDeskHTMLエディター

最高のHTMLエディタの比較

＃1）JSFiddle

JSFiddleはオンラインHTMLエディターです。 HTML、CSS、JavaScriptをサポートしています。 JS Fiddleのコードスニペットは、フィドルと呼ばれます。

特徴：

• さまざまなバージョンまたはタイプの言語を選択できます。 例えば、 HTMLパネルでは、HTML 5、XHTML 1.0 Strict、HTML 4.01Transitionalなどのいくつかのオプションからdoc-typeを選択できます。
• JavaScriptを使用すると、ライブラリをロードできます。

長所：

• 使いやすい。
• HTML、CSS、JavaScriptに加えて、JavaScriptフレームワークをサポートします。

短所：

• Codepenのような高度な機能はありません。
• 干渉する広告があります。

ツールコスト/プランの詳細： 自由

ウェブサイト： JSFiddle

＃2）JSビン

JS Binは、オンラインのHTMLコードエディターです。 HTML、CSS、JavaScriptをサポートしています。高速に動作し、自動終了ブラケット、強調表示ブラケットなどの多くの機能を提供します。

特徴：

• HTMLコードをテキストファイルにエクスポートできます。
• コードのリアルタイム出力が表示されます。
• モバイルでのテストをサポートします。
• コードキャストやカスタム開始コードなど、さらに2つの機能を提供します。
• 上記の機能はすべて無料版用です。プロバージョンでは、Dropbox Sync、プライベートビン、バニティURL、メールサポートなどの追加機能を提供します。

長所：

• キーボードショートカットをサポートしています。
• パネルを非表示にすることができます。

短所：

• 無料版では機能が制限されています。
• JavaScriptの場合のみリアルタイムで警告を表示します。

ツールコスト/プランの詳細： 無料版が利用可能です。そしてプロバージョンは年間130ドルまたは月額17ドルから始まります。

ウェブサイト： JSBin

＃3）Adobe Dreamweaver

Adobe Dreamweaverは、Webサイト開発ツールです。新しいバージョンでは、CSS、JavaScript、および一部のサーバー側プログラミング言語をサポートしています。 WindowsとMacOSで使用できます。

特徴：

• 構文の強調表示（バージョン5以降）。
• コードのヒント。
• コードの色付けは、コードの更新時に役立ちます。
• あなたはどんなスクリーンサイズにも合うことができるウェブサイトを開発することができます。

長所：

• コードの下に出力を表示できます。ウィンドウを切り替える必要はありません。
• 間違いの強調表示。

短所：

c ++ハッシュ関数の実装

• Linuxシステムでは使用できません。
• ブラウザベースのビューは提供しません。

ツールコスト/プランの詳細： 月額$ 20.99

ウェブサイト： Adobe Dreamweaver

＃4）Codepen

CodepenはオンラインのHTMLコードエディタです。 HTML、CSS、およびJavaスクリプトに使用できます。 Codepenは、教育や執筆のためにチームで使用できます。

特徴：

• Codepenを使用すると、プライバシーを維持できます。
• 画像、pdf、JavaScript、CSS、さらには短いムービーファイルなどのファイルのアップロードをサポートします。
• IDEのようなプロジェクトの機能を提供します。自動前処理、ファイルアップロード、Webサイトの展開、その他多くの機能があります。
• コードの出力は、複数のデバイスやコンピューターで確認できます。
• Embed Builderを使用すると、テーマを作成できます。
• 教授モードは、コードの共有や学生とのリアルタイム出力、グループチャットなどの多くの機能を提供します。生徒はその作業を保存してコピーを作成できます。

長所：

• コードについてサポートが必要な場合は、CodepenチームがSpectrumチャットを通じてサポートを提供します。
• ファイルをドラッグアンドドロップしてアップロードできます。使いやすいです。

短所：

• 無料プランではほとんど機能がありません。

ツールコスト/プランの詳細： 個人やチーム向けの計画があります

個人の場合、次の計画があります。

• 無料プラン。
• 毎年恒例のスターター： 月額$ 8。
• 年次開発者： 月額$ 12。
• 毎年恒例のスーパー： 月額26ドル。
• チームの場合： メンバーあたり月額$ 12。

ウェブサイト： Codepen

＃5）CoffeeCup

これは、Windowsオペレーティングシステム用のHTMLエディターです。新しいHTMLおよびCSSファイルの作成をサポートします。既存のWebサイトでも作業できます。

特徴：

• WYSIWYG編集が可能です。
• いくつかの既存のテーマがあり、すぐに使用できるレイアウトです。
• クロスブラウザ互換性を提供します。
• タグ参照とコード補完を提供します。
• 分割画面プレビュー機能を使用すると、その下にあるコードの出力を確認できます。
• FTPローダーが組み込まれています。

長所：

• HTML以外に、CSS、PHP、およびMarkdownをサポートします。
• テーマはカスタマイズ可能で応答性があります。

短所：

• クラウドベースのツールではなく、Windows以外のオペレーティングシステムもサポートしていません。

ツールコスト/プランの詳細： 49ドル。無料トライアルをご利用いただけます。

ウェブサイト： CofeeCup

＃6）KompoZer

KompoZerは、HTML用のWYSIWYGエディターです。 KompoZerはNvuの新しいバージョンのようなものです。多くのバグが修正され、Nvuに新しい機能が追加されました。 Nvuに基づいているため、MozillaComposerコードベースを使用します。これはオープンソースのツールです。

特徴：

• FTPが組み込まれています。
• テーブル管理、フォーム管理、および複数のWebサイトのサポートがあります。
• テーブル管理機能を使用すると、テーブルを作成できます。テーブルのサイズを変更して、テーブルに行を追加できます。
• テンプレートを提供します。

長所：

• 使いやすい。
• リアルタイム出力を表示します。

短所：

• その開発は現在停止されています。

ツールコスト/プランの詳細： 自由。

ウェブサイト： KompoZer

＃7）BlueGriffon

BlueGriffonは、Windows、Linux、およびMac用のWebエディターです。 HTMLとCSSに使用できます。多くの機能はアドオンを通じて利用できます。

特徴：

• オーディオ、ビデオ、フォームでもHTML 5（HTML＆XML）をサポートします。
• 黒と光の2つのテーマオプションがあります。
• 単語数に関する警告を提供します。
• WindowsおよびLinux用のスポイトおよびカラーピッカー。

長所：

• 堅牢なアプリケーション。

短所：

• ユーザーマニュアルを購入する必要があります。無料版ではなく、基本ライセンスで利用できます。

ツールコスト/プランの詳細：

• 無料版が利用可能です。
• 基本ライセンスは87ドルからです。

ウェブサイト： BlueGriffon

＃8）CKEditor

WYSIWYG機能を備えたテキストエディタです。 HTML出力フォーマット機能があります。それはあなたがウェブページに直接書くことを可能にするでしょう。

特徴：

• Chrome、Firefox、Safari、MicrosoftEdgeなどの複数のブラウザをサポートします。
• 列サイズのサイズ変更などのテーブル管理機能。
• キーボードショートカットをサポートしています。
• HTMLタグのHTML出力フォーマット。

長所：

• スペルチェック。
• オートコンプリート。

ツールコスト/プランの詳細：

• 最大5ユーザー、無料です。
• 最大50ユーザー、65ドルから。
• 最大100ユーザー、110ドルから。あなたはから価格をチェックすることができます ここに 。

ウェブサイト： CKEditors

＃9）小冊子

DabbletはオンラインのHTMLコードエディタです。 CSSでより多く使用されます。 Dabbletを使用するには、GitHubにサインインするか、GitHubでアカウントを作成する必要があります。

特徴：

• コードにプレフィックスを追加する必要はありません。
• スタイル属性を持つ要素を処理できます。
• のすべてのスタイルシートを処理できます。

長所：

• ビュー設定を調整できます。
• フォントサイズを設定できます。

短所：

• 限定的なブラウザサポート。 IE9 +、Opera10 +、Chrome、Safari4以降で使用できます。これはデスクトップ用です。モバイルブラウザの場合、Safari、Androidブラウザ、Opera Mobile、およびChromeのサポートを提供します。
• JavaScriptはサポートしていません。

ツールコスト/プランの詳細： 自由

ウェブサイト： ダブレット

＃10）CSSDeskHTMLエディター

これはオンラインのHTMLコードエディタです。 HTML、CSS、およびJavaScriptのサポートを提供します。コードをファイルにダウンロードできます。

特徴：

• 多くの人にリアルタイムコーディングをサポートします。
• 作成、視聴、コードキャストをサポートします。コードキャストは、エディターで入力されたコードの記録です。他の人が入力したコードの記録である可能性があります。
• 私たちの作品はCSSデスクギャラリーに投稿できます。

長所：

• フォーラムやStackOverflowのピアとのテストケースの共有をサポートします。
• テストケースのヘルプを提供します。
• TwitterやFacebookで簡単に作品を共有できます。

ツールコスト/プランの詳細： サインアップは無料ですが、より高度な機能については、それらに連絡する必要がある場合があります。

ウェブサイト： CSSDeskHTMLエディター

JavaでのSeleniumWebdriverサンプルコード

追加のツール

＃11）TinyMCE： 豊富な機能を備えたオープンソースのテキストエディタです。 JavaScriptライブラリと簡単に統合できるように設計されています。複数のブラウザとオペレーティングシステムをサポートしています。

ウェブサイト： TinyMCE。

＃12）HTMLキット： このHTMLコードエディタは、Windowsオペレーティングシステムのみをサポートします。言語の場合、HTML、XHTML、およびXMLをサポートします。その試用版が利用可能です。 49ドルからの価格で購入できます。

ウェブサイト： HTMLキット

#13) Mobirise: Mobiriseはウェブサイトビルダーです。完全なウェブサイト構築のために、それはドラッグアンドドロップ機能をサポートします。したがって、このツールの助けを借りて、コーディングせずにWebサイトを構築できます。無料でご利用いただけます。

ウェブサイト： Mobirise

＃14）Google Web Designer： HTML5をサポートしています。 Windows、Linux、MacOSで使用できます。これは、HTML5広告およびHTML5コンテンツの作成に特に使用されます。

ウェブサイト： Google Web Designer

＃15）Microsoft FrontPage： これは、MicrosoftによるWindows用のWYSIWYGエディターです。これは、Microsoft ExpressionWebとSharePointDesigner（これはデスクトップ用）の2つのエディターに置き換えられ、これらもWebベースのSharePointDesignerに置き換えられました。

ウェブサイト： Microsoft FrontPage

その他のオンラインHTMLエディター

結論

JSFiddleはクラウドベースのツールであり、無料で利用できます。 Codepenは商用ツールですが、価格に見合った優れた機能を提供します。 CodepenとJSFiddleは、どちらも開発者の間で人気があります。

CoffeeCupは、WindowsOS用のHTMLエディターです。オンラインまたはクラウドベースのHTMLコードエディタを使用したくない場合は、CoffeeCupが最適なオプションです。 BlueGriffonは、有料オプションで優れた機能を提供します。このチュートリアルで言及されている他のすべてのHTMLコードエディタは、最上位にあります。

要件とHTMLコードエディタの機能に基づいて、これらのツールのいずれかを選択できます。

推奨読書

• 最高のソフトウェアテストツール2021 (QAテスト自動化ツール)
• 14の最高のオンラインコンピュータ工学の学位プログラム（2021リスト）
• DevOpsテスト用のトップ10継続的テストツール(2021リスト)
• 152021年に最も人気のあるHTMLValidatorオンラインツール
• 2021年のトップ30以上のWebアプリケーションテストツール（包括的なリスト）
• 2021年のトップ7のベストデータ分析会社(2021年のリストを更新)
• 10の最高のAPMツール（2021年のアプリケーションパフォーマンス監視ツール）
• プログラミングを排除するための2021年のトップ10データサイエンスツール