WordPress開発者と上級者向けの無料で使えるHTMLエディター10選

定期的にWordPressのファイルを編集したり、オリジナルのカスタムプラグインやテーマを作成したりする予定はありますか？HTMLやCSSを扱う場合はコードエディターが必要です。

コードをたくさん扱う場合、HTMLエディターを使うと非常に楽になります。ただでさえ難しいプログラミングです。不適切なインターフェースでは効率的に行うのはほとんど不可能と言えるでしょう。無料のHTMLエディターをインストールするとより良い機能やUIが利用でき、効率的にコードを記述できるようになります。

効率的な環境でコーディングをし、より良いワークフローを実現しましょう！

今回はおすすめのHTMLエディターをご紹介します。あなたのニーズにマッチするものを選ぶのに是非お役立てください！

HTMLエディターとは

HTML（Hypertext Markup Language）はインターネットを作り上げているコードです。HTMLはマークアップ言語と呼ばれ、テキストを太字に指定したり、コードで画像を表示したりと、要素を定義するのにタグを用います。

HTMLは使いやすく、学びやすく、読みやすいように作られていて、しばしばCSSとJavaScriptと一緒に使用されます。他の言語と比べ習得が容易なため、多くのWeb開発者はまずHTMLから学びます。

HTMLを記述するのはとても簡単で、コンピューターでメモ帳を開き、マークアップをいくつかタイプし、.htmlファイルとして保存するだけです。ファイルをブラウザにドロップすれば表示を確認することもできます。

しかし、大掛かりな開発を行いたい場合は、この方法はお勧めできません。不適切なエディターでコーディングをすればすぐに悪夢のような状況に陥るでしょう。シンプルなワードプロセッサーでは不十分です。

多くの開発者がコード編集プログラムを作成してきたのはそのためです。ツールにはシンタックスハイライトやオートコンプリート、エラー検出など複雑なコードを多用するプログラミングが楽になる、便利な機能が充実しています。

HTMLエディターはWeb開発者のために設計されており、必要な専用の機能が盛り込まれています。また、通常JavaScript、PHP、CSSなど他の言語にも対応しており、Web開発に必須の要素と言えるでしょう。

なぜHTMLエディターが必要なのか

WordPressには独自のHTMLインターフェースが備わっていて単独のコード編集アプリケーションと同じような機能を果たします。WordPressサイトのコードの変更をたまに行う程度であれば、専用のHTMLエディターをダウンロードする必要はないでしょう。

しかしWordPressのエディターはサイトの既存のページに直接変更を加える時にしか使えません。新しいHTMLのページや要素を作成したり、オリジナルのWordPressテーマやプラグインを作成したりしたい場合はどうしたら良いのでしょうか？WordPressのブラウザベースのインターフェースでは対応できません。

WordPressのWeb開発を始めたい場合は独立したHTMLエディターのダウンロードが必要となります。そうすることで使いやすくカスタマイズ可能なインターフェースや、開発者にとって便利な機能が利用できるようになります。中にはFTPに対応したエディターも存在するため、サイトのファイルを編集し変更点を自動的にアップロードすることもできます。

正直、メモ帳でプラグインやテーマを作成するのは至難の技でしょう。また、全てを一から作りたい場合はWordPressのエディターでも不十分です。専用のプログラムが必要になります。

HTMLエディターを選ぶ時のポイント

開発者にはそれぞれ独自のスタイルがあるので、その人に合ったHTMLエディターを探すという作業は個人的な作業とも言えます。最高の使い勝手のものを見つけるまでには、おそらくいくつか試してみる必要があるでしょう。しかし、全ての編集用インターフェースにおいて確認しておくべきポイントがいくつかあります。

二つの重要なポイントは、「対応しているプラットフォーム/オペレーティングシステム」と「活発に開発されているか」という点です。

常に作業をする環境を意識して選ぶようにしましょう。中にはLinuxやWindows専用でMacのサポートは不十分というものも存在します。プログラムがどのプラットフォームをサポートしているかを必ず確認しましょう。それぞれ異なるオペレーティングシステムを使用する複数のコンピューターで作業を行う予定であればなおさらです。

また、活発に開発がされているHTMLエディターを選んだ方が良いでしょう。HTMLは常に発展し続けている言語なので、何年間もアップデートされていないエディターはそのうち不具合を起こしてしまうでしょう。しかも、保守をしている開発者がいないということはバグ修正が行われないということになります。しっかりと保守されているツールを選びましょう。

他にもHTMLには様々な表層的な機能が搭載されています。全てが必要不可欠というわけではなく、中にはあまり気に入らない機能や全く必要のないものも含まれているかもしれません。あなたが必要な機能が含まれているエディターを選びましょう。

• シンタックスハイライト/カラーコーディング：HTMLはタグベースのマークアップ言語なので、ハイライトは必要不可欠です。シンタックスハイライト機能は、タグが一目で分かるようにハイライトしてくれて、コードのブロックの扱いがとても楽になります。
• バージョン管理：変更点を戻したり、コードの前のバージョンを閲覧したりしたい時は古いコピーを保存できるバージョン管理機能が便利です。他の開発者と共同で作業を行う時には必要不可欠です。
• 自動保存: せっかくの作業が消えてしまうと最悪ですよね。プログラムがクラッシュした時に備えて自動保存機能つきのエディターを利用しましょう。
• オートコンプリートとサジェスト:オートコンプリート機能では候補が表示され、ボタンを押すだけで簡単に長いコードを自動で補完してくれます。また自動で終了タグも生成してくれます。
• コードの折りたたみ:長いコードを扱っている時、コード折りたたみ機能があれば無関係な部分を折りたたみ、特定のエリアに集中することができます。
• マルチカーソル/同時編集:マルチカーソル機能では、複数の箇所に同時にコードを記述することができます。同じコードの複製を追加する時にとても便利です。
• 検索と置換:特定のコードを検索し別のものに置換する機能がついたコードエディターはとても便利です。HTMLのスタンダードは定期的にアップデータしており、非効率なタグは廃止されていることを考えると、この機能はとても重要です。
• エラー検出:HTMLはマークアップ言語でありプログラミング言語ではないため、コンパイルという概念がなく、コードのテストの機会がないことを意味します。リアルタイムのエラー検出があれば、間違った時にすぐに気がつくことができるので非常に重要です。
• FTP対応:FTPに対応したHTMLエディターではWordPressと接続しあらゆる変更点をアップロードすることができます。変更を加えるたびにFileZillaや利用中のFTPクライアントにログインする必要が無くなります。

もっと高度な機能を持ち、他のプラットフォームとも連携ができるコードエディターをお探しの場合は、単なるテキストエディターではなくIDE（統合開発環境）が必要となります。これはHTMLエディターと似ていますが、より上級レベルの開発者向けの強化されたツールとなっています。

また、WYSIWYGエディターも要チェックです。手動でコーディングするのではなく、インターフェースの編集によりウェブサイトの構築やHTMLの生成が可能です。

ただしブラウザによってコードの表示のされ方は異なるため、エディター内での表示と若干異なる場合があることは覚えておきましょう。複数のブラウザでのテストと最適化が必要となりますが、HTMLを記述するよりも視覚的な操作をしたいという方には便利でしょう。

おすすめの無料HTMLテキストエディター

テキストエディターはHTMLを記述することに特化したクリーンなインターフェースのシンプルなプログラムです。多くの開発者は動的なWYSIWYGエディターや、ごちゃごちゃしたUIで不必要な機能も多いIDEよりもテキストエディターを好んで使用しています。テキストエディターはHTMLの記述というシンプルな用途のために最適化されていて、作業全体を自由に管理できるツールです。

Notepad++

そのライトウェイトな設計でよく知られるNotepad++はWindows向けのテキストエディタです。シンプルさと学びやすさから、しばしば開発者が最初に用いるツールとなっていますが、作業を効率化するための便利な機能もかなり充実しています。

Notepad++は多くの言語に対応していて、その中にはHTML、CSS、PHP、JavaScriptも含まれます。つまりWordPressの開発者に必要な言語全てを網羅しています。また、2003年にリリースされてから活発にアップデートされており、今後数年間は定期的な保守がされることが予想されるため安心して使用できます。

プログラムには自動保存、検索と置換、画面分割、同時編集の他、サードパーティープラグインへのサポートなど便利な機能がたくさんあります。Notepad++は初心者にぴったりですが、Web開発者がキャリアを築いていく上で必要な機能も十分に備わっています。

Visual Studio Code

2015年と、比較的新しくリリースされたにもかかわらず、Visual Studio Codeは多くの開発者にお勧めしたい非常に人気なコードエディターの一つ。とてもしっかりとしていてカスタマイズの自由度も高く、インターフェースは自分の好みにパーソナライズすることができる上、エクステンションによってさらに機能を追加することもできます。

このエディターはHTML、CSS、JavaScript、PHPと、全てをサポートしているため、ツールを途中で変える必要は一切ありません。

シンタックスハイライトとオートコンプリート機能にはIntelliSenseを使用しており、Git/Githubバージョン管理とFTP機能も備わっています。

さらにVSCはWindows、Mac、Linuxで使用できるため、ほとんどのユーザーが利用できます。機能がとても多いので、初心者の開発者にとっては少しハードルが高いかもしれませんが、使い方が分かってしまえば、必要なツールが全て揃っている便利なエディターです。

CoffeeCup Free Editor

HTMLに特化したツールをお探しですか？CoffeeCup Softwareは上級のWeb開発者向けの商用プログラム、HTML Editorを販売していますが、同時に機能を縮小した完全無料版もリリースしています。

無制限のFTP接続、HTML/CSSのバリデーション、コード整形など一部の機能はトライアルでしか使用できません。しかし、UI/ツールバーカスタマイズ機能、コードコンプリート機能、シミュレーターブラウザでのHTMLプレビューなどの機能は使用でき、基本的な機能は全て揃っています。

さらにCSS、JavaScriptにも対応しているため、Webサイトの構築に必要なツールは概ね全て手に入ると言えるでしょう。

Brackets

Notepad++のライトウェイトな設計は気に入っているけれど、Web開発に特化したプログラムを使用したい、という方にはBracketsが非常におすすめです。Windows、Mac、Linuxで使用でき、過不足のない適度な機能が搭載されています。

HTML、JavaScript、CSSに対応したこのエディターでは、ライブプレビュー、プリプロセッサーサポート、ハイライト、そして不足している機能を補完できる無料のエクステンションが利用できます。Web開発を念頭において設計されているため、WordPressサイト作成に必要な要素はちゃんと揃っています。

Bracketsは不必要な機能が付いていないので、ミニマルでクリーンな作業スペースを好む開発者に最適です。

Komodo Edit

ActiveStateはKomodo IDEという、デバッグや他のプラットフォームとの連携など高度な機能が備わった統合開発環境を提供しています。しかし、よりシンプルで使いやすいHTMLエディターが良いという方にはKomodo Editがおすすめです。Windows、Mac、そしてLinuxの様々なディストリビューションなど様々なオペレーティングシステムで使用できます。

エディターはHTML、PHP、CSSなど様々な言語に対応しています。外見は自由にカスタマイズでき、オートコンプリート機能、複数選択機能、変更履歴機能などが利用できます。シンプルながら、とても充実したツールです。

Sublime Text

こぎれいで洗練されているSublime TextはWindows、Linux、Macで使用できるコードエディターです。ビルトインの23個のテーマが用意されており、インターフェースを完全にカスタマイズすることも可能です。さらに、様々なマークアップ言語、プログラミング言語に対応しています。

Sublime Textでは文字列や記号にジャンプしたり、様々な構文を定義したり、コードをハイライトしたり、複数行を選択したり、分割編集をしたりすることができます。また、検索可能なコマンドパレットにより、あまり使わない機能を表示せずインターフェースをクリーンに保つことできます。コーディングのインターフェースを自由にカスタマイズして綺麗に保ちたいという方はSublime Textをきっと気にいるでしょう。間違いなく最もスムーズな使用感が得られます（ちなみにこれは私の個人的なおすすめです）。

Atom

インターネット上で最大のソフトウェア、Web開発コミュニティであるGitHubが開発したAtomは、共同作業を行うために設計されています。Git/Githubバージョン管理のサポートが組み込まれている上、何と言ってもリアルタイムの共同編集が特徴。ファイルをもうやり取りする必要はありません。一つのプロジェクトでの共同作業が可能です。

Atomは主流なオペレーティングシステム全てで使用でき、テーマ、サードパーティプラグインをサポートし、インターフェース自体への変更をHTMLとCSSを用いてコーディングすることさえできます。こぎれいで拡張性に優れ、機能が充実しているこのエディターはチームメイトとスムーズにやり取りをしたい時に是非使用したいツールです。

もっとも使われているHTMLコーディング用のHTMLエディター

ソフトウェアの良し悪しを判断するのに人気があるかどうかは一つの大きな指標となります。もちろんあまり知られていない素晴らしいソフトウェアも存在するでしょうが、人を惹きつけるのには必ず何かしらの理由があります。何千人もの人に使用されているプログラムは、質の良いものである可能性が高いと言えるでしょう。

Stack Overflow Developer Survey 2018と2019によると、もっとも人気なHTMLエディタは次のようになっています。

• Visual Studio Codeが両年ともトップの使用率を誇り、2019年では調査対象の開発者のなんと6%が使用しているという圧倒的な結果となりました。当然最も利用されているWeb開発プログラムのトップにつきました。
• Notepad++もまた両年とも2位につけており、どちらの年も調査対象者の約35%が使用していたという結果になりました。おそらくそのシンプルさと用途の幅広さが人気の秘密でしょう。
• Sublime Textは2018年の調査では対象者の30%が使用しているという結果で、競争力のあるHTMLエディターであることは間違い無いでしょう。クリーンな使用感のこぎれいなエディターが嫌いという開発者はまずいないでしょう。
• Atomの使用率は2019年に9%から12.7%に減少しましたが、共同作業機能がチームで作業をする人々の厚い支持を集めています。

数字は嘘をつかないと言いますが、あなたにとって魅力的なHTMLエディターがあればあまり知られていないものでも是非試してみましょう。知られていないからといって、使い勝手が悪いとは限らないものです。

おすすめの無料WYSIWYG HTMLエディター

視覚的なインターフェースで作業をする方が好き、という方はWYSIWYGエディターの使用を検討してみても良いでしょう。このツールではビジュアルインターフェースで作業ができ、大半のものは手動でのコーディングも可能ですが、HTMLを学ばなくても利用することが可能です。

一方、デメリットはビジュアルインターフェースの場合、タグを自動で挿入するため、コーディングの融通がききづらいという点。作業スペースを自由に管理したい開発者にとっては不便かもしれません。また、コーディングが散らかってしまう可能性もあります。

WordPressにはTinyMCEというビルトインのWYSIWYG HTMLエディターが備わっています。おそらく新しいページを作成したりWebサイトをカスタマイズしたりする方法としてはこれを使用するのが一番簡単でしょう。しかしTinyMCEのインターフェースが使いづらいという方のためにいくつか代わりになるエディターをご紹介します。

• BlueGriffon: FirefoxのレンダリングエンジンをベースとしたBlueGriffonはHTMLとCSS のソースコードに対応した人気のWYSIWYGエディターです。WAI-ARIAなどの仕様に準拠する上でも力を発揮します。
• HTML Notepad: 構造化文書での作業ができるダウンロード可能なエディターです。Windows、Mac、Linuxで利用でき、インストールする必要のないポータブルバージョンも存在します。
• CKEditor: TinyMCEと非常によく似ているCKEditorはプラグインとソースコードの編集に対応したHTML/リッチテキストエディターです。無料でダウンロードでき、ミニマルな使いやすいインターフェースが特徴です。

さらにCoffeeCup、Brackets、Atomはテキストエディターですが、コードを視覚化するためのビルトインのツールが備わっています。また、プラグインをサポートしているエディターの多くではサードパーティーのHTMLプレビュープラグインが使用できます。WYSIWYGのインターフェースでの作業はしたくないけれど、簡単にコードをプレビューしたいという方はこれらを利用すると良いでしょう。

まとめ

WordPressのデフォルトのWYSIWYG HTMLエディターのTinyMCEは、単にサイトのページを編集したいという方の大半にとっては十分なツールです。しかし、HTMLでたくさんのコードを扱わなければならないという場合は、それでは不十分でしょう。お気に入りのコードエディターを見つければ、テーマやプラグインの作成がとても簡単になります。

どれを選べばいいか分からない？

それなら…Notepad++、Komodo Edit、Sublime Textは適切な機能を備えたシンプルでクリーンなインターフェースが好きな方にとってはぴったりです。Visual Studio Code はIDEと同様に相当な機能が備わっているので、最大限に機能が充実したものを使いたい場合におすすめです。CoffeeCupとBracketsはHTMLのWeb開発専用のツールなので、HTMLに特化したものをお探しの場合はぴったりでしょう。そしてAtomは共同での作業が必要な場合や作業環境を自由にコントロールしたい場合に最適です。

あなたのお気に入りのHTMLエディターは何ですか？コメント欄で是非お聞かせください！