【2021年版】HTMLを書く際に便利なエディタ15選

【2021年版】HTMLを書く際に便利なエディタ15選

HTMLエディタとは何か？

HTMLエディタは、HTML形式に対応したテキストエディタで、通常のメモ帳やテキストエディットに比べると HTMLタグが見やすかったり、タグの入力を補助してもらえるソフトのこと。またエディタによっては、コードエラーも自動表示してくれますので、HTML学習のサポートにもなったりしますね。つまり HTMLエディタは、 HTMLコードを書いたり編集したりする際には必須のツールということです。

エディタを使うメリット

エディタの種類にもよりますが、主だったメリットは以下の通り。

• HTMLタグの自動補完
• CSSコード入力の補助
• コードエラーの自動注意喚起
• 複数行の一括編集
• ライブ・プレビュー

私は、3年ほど前からテキストエディタを使って HTMLコードを編集したり、ブログ記事を書いたりしています。 Wordなどの文章作成ソフトに比べると軽量でサクサク動き、記事制作が効率的。またWebページの編集や一部デザインの編集でも HTMLタグサポートやプレビュー機能があるので助かっていますね。テキストエディタまだの方は、とりあえず 2、3種類インストールして使ってみることをオススメします。

テキストエディタを選ぶ際のポイント

これからテキストエディタを 15種類ご紹介していきますが、自分にあったものを早く見つけるためのポイントがあります。

ポイント① 用途

テキストエディタには、

• プロジェクト管理型
• 部分型
• シングルページ型

があります。

プロジェクト管理型は、フォルダとファイルを管理しながら HTMLファイルや CSSファイル、 JavaScriptファイルを編集できるもので、Web制作の場面において大いに役立ちます。Sublime Text や Atom、Visual Studio Codeなどがこれにあたりますね。

部分型は、ページ内のボタン部分の HTMLコードと CSSコードだったり、入力フォーム部分の HTMLコードと CSSコードといった具合に、HTMLファイルの一部分の編集に役立つエディタ。オンラインの CodePen などが有名ですね。

シングルページ型は、1枚の HTMLファイルのみ編集するエディタ。主にオンライン型の HTMLテキストエディタでよく見かけるパターンです。

このように「テキストエディタ」にはいくつか種類があり、用途によって使い分けると効率的ということを知っておきましょう。

ポイント② IDEとエディタ

テキストエディタとよく似たソフトに IDE（統合開発環境）があります。この 2つ一見すると似ていますが、異なる存在。代表的な IDE としては、NetBeans や Eclipse、Microsoft Visual Studio などがあり、こちらでも HTMLコードを編集できますが、テキストエディタとは違います。

IDEは Web開発に必要な様々な機能を標準装備しています。そのためソフト自体の容量が大きく、起動にも時間がかかったりしますね。それに対してテキストエディタは「書く」ことに特化したソフトなので、起動も早くサクサク操作できるのが特徴的。将来的に Boostrap や jQuery などのライブラリを使用する際は、IDE特有の使い方を覚える必要もあったりしますので、まずはテキストエディタからはじめてみることをオススメします。

ポイント③ 自動入力機能

HTMLエディタに備わっている HTMLタグの「自動入力機能」は、ソフトによっていろいろ。

例えば、Visual Studio Code は <table> と入力すると </table> が自動入力。Atom は <table> と入力しても </table> は自動入力されません。閉じタグについては個人差あると思いますが、私の場合は自動入力ある方が効率的。実際にいくつかのソフトを使って、自分にあったスタイルを探しましょう。

以上の点を踏まえて、HTMLの編集が楽しくなる効率的なテキストエディタを紹介します。

HTMLが楽しくなるエディタ15選

Brackets

Bracketsは、Adobe社からリリースされているテキストエディタで、以下の点からHTML初学者にオススメです。

• インストール直後からライブ・プレビューを使える（Chrome）
• 編集コード部分がプレビュー画面にハイライトされて分かりやすい（上図参照）
• Ruby や Python など他言語もサポート

テキストエディタはたくさんありますが、インストール直後からライブ・プレビューを使えるのは、この Brackets だけです。またインストール直後にサンプルの HTML が自動起動しますので、 HTML知識ゼロの方でもなんとなく文字やコードをイジって、HTMLの感触を確かめることが可能。 HTMLをこれから始める方に一度は試して欲しいテキストエディタです。

Visual Studio Code

画像引用：Microsoft Visual Studio Code

Visual Studio Code は、Microsoft社から提供されているテキストエディタで、私の常用エディタになります。HTMLはもちろんのこと、CSS や JavaScript、Python、Java、Markdown などのほとんどの言語に対応している点や Djangoなどフレームワーク開発時の HTML管理がしやすいこと、テーマを変えて気分転換できることなどが常用の理由です。ただし、他のエディタに比べてアップデート通知の回数が多いように思う点がデメリット。HTML機能のハイライトについては、こちらの公式ページが参考になります。

Notepad++

Notepad++ は、Windows用のテキストエディタでプログラミング初心者に人気のエディタです。Windows特有のメニュー画面で、Windowsユーザーの方なら直感的に操作できるでしょう。実行ボタンからブラウザ・プレビューが見れるのもプログラミング初心者にとっては有り難い機能と思います。ただし、HTMLタグの補完機能はありますが、タグ毎の自動インデント機能はありませんので、<div> をよく使うような HTMLコードにはむかないかもしれません。

Atom

Atomは、GitHubによって開発されたテキストエディタで、豊富なプラグインが特徴的。例えば、ドットインストールのプラグインをセットすれば、動画を見ながら Atomで HTMLをコーディングできます（上図参照）。これは結構効率で、プログラミングを始める方に一度は試していただきたい学習スタイルです。 他のエディタに比べて、class や id などの固有名称を記憶してくれる点が、利用者としては助かります。

Sublime Text

Sublime Text は、テキストエディタの中でも人気のソフト。高機能な割に軽量でサクサク動き、プラグインの追加によって自分好みのエディタに仕上げることが可能。ただし、プラグイン操作にはコンソール（コマンド）を入力する必要がありますので、コマンドプロンプトやターミナルを使ったことない方にとってはストレスとなるでしょう。無料でも利用できますが、ソフトを閉じる時に時々ライセンス購入を促されますね。

CodeCamp提供のデザインマスターコース

当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は

• デザインからコーディングまでWebデザイナーに必要なスキルを獲得できる
• Webデザイナーとして転職・フリーランスも可能になる
• 実際にWebサイトを作るのでポートフォリオとしても使用できる

詳細はこちらから確認してみてください！▶︎https://codecamp.jp/courses/master_design

W3School

W3School は、HTML や CSS のチュートリアルサイトで、こちらのページ上で HTMLを編集・プレビューすることが可能。ログインも必要なく気軽に HTML をテストできるので、ボタンや表、画像など部分的に HTML コードを試してみたい時にオススメです。 書いたコードは「SAVEボタン」で特定の URL上に保存可能。

Liveweave

Liveweaveは、ブラウザ上で HTMLコードを編集・プレビューできるサービスで、HTMLコードをちょっと試したい時に便利。また作成したコードは、自分のアカウント上に保存できるので HTML の練習にはもってこいでしょう。Boostrap や jQueryといったライブラリも知識ゼロでもクリックするだけで、ライブラリ各種をセットアップできます。ただし、1つの HTMLシートのみを編集するのでプロジェクト開発には不向きです。

CodePen

画像引用：CodePen／表のレスポンシブ化

CodePen は、コード共有サービスで、他人が作成した HTMLコード、 CSSコードを拝見、ダウンロードすることが可能です。HTMLの基礎学習に合わせて「こんなコードの書き方もあるんだ」という学習補助として役立つサイトと思います。無料ユーザー登録すると、自分が書いた HTMLコードも保存・管理できますので便利です。ただし、1つの HTMLシートのみの編集となりますので、部分的なテストコードに留まりますね。

Repl.it

Repl.it は、オンライン上でファイルやフォルダを管理して、HTML や CSS、JavaScript、Python、PHP などが書け、プレビューできるサイト。無料でもたくさんプロジェクトを作成できますので、HTMLの練習はもちろん、実際のプロジェクト開発にも利用できますね。また HTML のプロジェクト作成を選択するだけで、雛形を自動作成してくれるので便利。ただし、ローカル環境に比べると実行速度が遅いというデメリットがあります。

HTML5-EDITOR.Net

HTML5-EDITOR.Net は、無料ブログツールの投稿編集部分だけをピックアップしたような HTMLのコーディングサイト。「まだ HTMLに慣れていない」「タグの入力は不安」という方に役立つと思います。文字や画像を編集してから HTMLコードを見る学習形態も知っておくと役立つと思いますよ。

Pingendo

Pingendo は、 Adobe Dreamweaverのようなソフトでデザイン編集機能の中に HTMLのコーディング機能があるといった感じ。ある程度 HTMLを体験して、本格的な Webデザインを考えている方にオススメなツール。Webページ上の文字やボタンをクリックすると、それがどの部分のコードかをハイライトしてくれるので HTML学習初期には役立ちます。ただし、テンプレートも豊富に用意されて直ぐに制作にとりかかれそうですが、 Boostrap など CSS の基礎知識が必要そうですよ。

BlueGriffon

BlueGriffon は、Pingendoに比べるとシンプルな機能を搭載したソフトで、すこし前のホームページビルダーといった感じ。HTMLコードではなく、文字や画像を入力して Web制作することもできますし、文字入力後、その HTMLコードの編集して細かい設定を行うことも可能。最初にテンプレートが用意されていないので、 HTMLファイルや CSS ファイルなどの操作経験をお持ちの方にオススメです。

SeaMonkey

SeaMonkey は、ブラウザ兼エディタというチョット変わったソフト。開発＆サポートは、FireFox と同じ mozilla財団が行っているので一定の安心感はあります。 インストール後、画面左下の Composer ボタンをクリックするとエディタが起動し、無料ブログツールのような形で Webページを製作可能。シンプルなメニュー画面で、プログラミング初心者の方でも使いやすいと思います。 ただし、こちらのエディタ機能は HTML4 のみで HTML5 には未対応。静的な Webページの開発を考えている方におすすめですね。加えて HTMLコードの自動入力補完機能がないので HTMLをガッツリ書きたい方には不向きかもしれません。

CODER

CODER は、オンライン上の IDE で、Webアプリケーションを考えている方に参考となるサービス。もちろん HTMLコードの作成・編集もできますが、プログラムの実行・プレビューにはまずブラウザの実行環境を整える必要がありますね。Ruby on Rails や Django などのフレームワークを仮想環境で試したい、という方に参考となるでしょう。無料利用枠も充実していますので、 VPSサーバーとか Ubuntuサーバーとか Vim とか考えている方にもオススメです。

まとめ

テキストエディタについては、上記で紹介したようなツール以外にもブラウザ上で「検証」機能を使い、そこから「Edit HTML Code」する方法や Google Chrome 用のアプリ「Caret」を使う方法、 Googleの 無料Web制作ソフトを使う方法など HTML をさわる方法は本当にたくさんあります。一度に全部を試そうと思うと大変なので、少しづつコードを打つ際に新しいソフトを使ってみて、自分にピッタリなソフトをみつけてみる方法がいいかもしれません。

尚、 HTML初学者やプログラミング入門者を対象とした CodeCamp では、ブラウザ上で HTMLファイルや HTMLコードを編集＆プレビューできるツールを用意しています。自分のパソコンに開発環境がなくても直ぐにプログラミングできるので、好評ですよ。まずは CodeCamp の無料体験で HTML、ちょっと触ってみるのもいいかもしれませんね。

最後に本稿でご紹介させて頂いた HTMLエディタのリストをご紹介させて頂きます。

この記事を書いた人

オシママサラ