HTMLを書くなら、業務をサポートしてくれるHTML用のテキストエディタが欲しいところです。

しかしHTMLエディタは非常に多くの種類があり、どれを使うか迷っている人もいるでしょう。

そこで、使いやすいおすすめのHTMLエディタを紹介します。選ぶポイントも解説するので、エディタ選びの参考にしてみてください。


HTMLを書くならHTMLエディタ！



Webに携わる仕事をするのであれば、HTMLコードが必要になります。

通常のメモ帳でも書けますが、できれば専用の「HTMLエディタ」を使いたいところです。

業務をサポートしてくれる機能があるので、仕事もスムーズになるでしょう。

しかしHTMLエディタは数十種類もあり、特徴や機能も様々。

そのため「どのエディタが良いのか分からない」と悩んでいる人もいるのではないでしょうか。

選ぶ時に重視したいポイントと、おすすめのエディタを押さえましょう。それが分かれば、自然と良いエディタが見つかるはずです。


自分に合ったHTMLエディタの見つけ方



HTMLエディタは数十種類あるため、エディタ選びに悩む人もいるでしょう。本当のおすすめしたいエディタは「自分に合っているエディタ」です。

自分の感覚や目的、作成したいWebサイトの傾向によって向いているエディタも変わってきます。

たとえばデザイン性の高いWebサイトを作りたいのに、凝ったレイアウトがあまり得意ではないmiを使うのは少し大変でしょう。

自分に合っているエディタを見つけるには、特徴や傾向、搭載できる機能を把握しておきましょう。


HTMLエディタを選ぶ際のポイント5つ



数あるHTMLエディタの中から自分に合ったものを選ぶために、重視したいポイントを紹介します。

そのポイントを満たしていればいるほど、「自分に向いているエディタ」である可能性が高くなるのです。

特に押さえておきたい基本的な5つのポイントを挙げてみましょう。


機能

HTMLエディタは色々な機能があり、その機能は多くの人が重視するポイントです。

自動入力やプレビュー、拡張ツールの豊富さ。その機能の有無によってエディタの傾向も変わるのです。

欲しい機能があるか、思うようなWebサイトが作れそうか必ずチェックしておきましょう。


言語（日本語も使えるか）



日本語でも使えるかどうかも重要なポイントになります。HTMLエディタは外国製のものが多く、日本語が対応していないものが多いです。

英語が苦手な人が英語表記のエディタを使うのはかなり苦痛になるでしょう。分からないところがあっても文字が読めないと解決できません。

英語に弱い方は日本語に対応しているエディタか日本製のものを選びましょう。


対応OS

そのエディタが、自分が使うコンピューターで動作できるかどうかも確認しておきましょう。

どんなに自分に向いていても、自分のコンピューターで動かなければ元も子もありません。使う前に動作環境は必ず確認しておきましょう。


動作速度

プログラミングしているエンジニア


動作速度も確認したいポイント。動きが重くてなかなか動いてくれないと、仕事が進まない上にストレスが溜まってしまいます。

サクサク動いてほしいなら、「動作が軽い」という特徴があるエディタを選ぶと良いでしょう。

実際にインストールして使ってみるのも手です。


使い方を解説しているWebサイトがあるか

これも見落としがちですが、「使い方を解説しているサイトがあるかどうか」も大きなポイントです。

使い方が分からない時、ヘルプがあまり役に立たない場合もあります。日本語に対応していない場合だと尚更です。

そんな時、ネットで解決方法を調べるのが一般的ですが、ネットに情報がなければ解決できません。

できればネットに情報がたくさんある有名で人気のあるエディタがおすすめです。今回紹介するHTMLエディタは、どれもネットに情報がたくさん掲載されています。


業務をサポートしてくれるおすすめ機能3つ



次に、あると便利なおすすめ機能を3つ紹介します。エディタによっては無い場合もありますが、あると業務が楽になる機能です。


プレビュー機能

プレビュー機能は、自分の書いたコードがWeb上でどのように表示されるかが分かる機能です。

入力したコードが間違っていたら表示がおかしくなってしまいますね。お客様が使うサイトなら大問題です。

Webサイトを作るなら是非欲しい機能です。


自動補完（インテリセンス）

喫茶店にてラップトップPCでフリーランスの仕事をする


少し記号や文字を打ち込むだけで、自動的にタグを入力してくれる自動補完機能です。主にVisual Studio Codeなどが得意としている機能です。

HTMLのタグをいちいち書くのは結構大変ではないでしょうか。

そんな時にコンピューターが判断し自動入力してくれると手間や時間が省けます。うっかりスペルミスを防げるのも利点となるでしょう。


自動整形

自動整形は、空白の整理やコードの表記ゆれなどを直してくれる機能です。

画面が見やすくなるだけですが、コード編集で画面の見やすさは非常に大事です。

見づらいと今どこを書いているのか、次に何のタグが必要なのか分からなくなってしまうでしょう。空白の数、表記ゆれが気になる人におすすめです。


【Windows・Mac両対応】おすすめHTMLエディタ5選



WindowsでもMacでも使える、おすすめのHTMLエディタを5つ紹介します。

両方のOSで使えるなら、違う動作環境でも同じエディタを使うことができて便利です。

仕事によって様々なOSを使うなら、両方対応しているHTMLエディタが良いでしょう。


Brackets

公式サイト・ダウンロード:http://brackets.io/

まず1つ目におすすめしたいのがBrackets。

Adobe社が開発・提供していて、無料で使うことができます。日本語にも対応済み。

画面がシンプルでとても見やすく、初心者でも上級者まで幅広いプログラマーに人気のあるHTMLエディタの一つです。

プレビュー機能やクイック編集など、機能面もかなり充実しています。

「もっとこんな機能が欲しい」と感じれば、拡張機能を使って後から欲しい機能を付け足せるのも特徴です。


Visual Studio Code

公式サイト・ダウンロード:https://azure.microsoft.com/ja-jp/products/visual-studio-code/

2つ目のおすすめはVisual Studio Codeです。略して「VSCode」とも呼ばれていますね。

Microsoft社が開発しているソフトで、こちらも無料です。日本語にも対応済みなのが嬉しいところ。

HTMLだけではなく、CSSやJavaScriptなど基本的なプログラム言語も書けます。

そんなVisual Studio Codeの魅力は、何といっても優秀なインテリセンス（自動補完機能）です。エディタ側が自動的にタグを入力するので、労力も減ってサクサク進みますね。

もちろん他の機能も豊富で、カスタマイズも自由自在。頻繁に機能が追加されるため頻繁にアップデートが行われています。


webstorm

オフィスでプログラミングをする男性


公式サイト・ダウンロード:https://www.jetbrains.com/ja-jp/webstorm/

チェコのJetBrains社が開発したHTMLエディタがwebstormです。

こちらは有料で6,800円と高価ですが、最初の30日間はお試しとして無料で使うことができます。

HTMLだけでなく、CSSやJavaScriptも対応済みです。

機能もかなり優秀で、特に便利なのがタグの自動補完やコードの自動整形。これは他のプログラム言語にも使えるので便利です。

さらに素晴らしいのが、Chromeなどのデベロッパーツールが必要ないところでしょう。このエディタから直接デバックできます。

便利機能が目白押しなwebstormですが、実は日本語に対応していません。エディタ内のメニューはすべて英語で表示されます。


Atom

公式サイト・ダウンロード（英語）:https://atom.io/

AtomはアメリカのGitHub社が開発した、フリーのHTMLエディタです。こちらは外国製ですが日本語にも対応しています。

またCSSやJavaScriptなど、他のプログラム言語も使うことができます。

それ以上に魅力的なのが、拡張ツールが非常に優れているところです。どんな変わった機能でも、Atomなら大抵対応できるツールがあります。

拡張しなくても自動補完やキーバインド・ペイン分割など便利な機能が最初から入っています。

そんなAtomにデメリットがあるとすれば、動作環境によって動きが重くなる可能性があること。1万行以上の長いコードを書くと少し動きがもっさりしてしまいます。

一方であまり重さを感じないという人もおり、PCのスペックにもよるため実際に入れて確かめた方がいいでしょう。


Sublime Text

公式サイト・ダウンロード（英語）:https://www.sublimetext.com/

最後に紹介するのがSublime Text。外国製ですが、日本語でも使えます。

「恋に落ちるエディタ」とも呼ばれていて、実際多くのエンジニアたちの心をとりこにしている大人気エディタの一つです。

こちらも拡張機能で機能を増やすので、標準では必要最低限の機能しかありません。初めて使う人にはシンプルで使いやすいでしょう。

機能をたくさんつけても、動作が重くなりにくい素晴らしいエディタでもあります。また、CSSやJavaScriptなど他のプログラム言語も使用可能です。


【Windows専用】おすすめHTMLエディタ2選

キーボードを打つ男性


続いてWindows専用のHTMLエディタを2種類紹介します。

Windowsだけでしか使えませんが、使いやすくて古くから人気のあるものが多いです。


Notepad++

公式サイト・ダウンロード（英語）:https://notepad-plus-plus.org/

Windowsには、最初から「Notepad」というテキストエディタがインストールされています。

より機能を充実させた上位互換版が「Notepad++」です。

多機能になっているだけなので、以前からNotepadを使っている人にはかなり使いやすいでしょう。

とてもシンプルなエディタで、直感的に使えるので初めてエディタを使う人におすすめです。

色々な機能が欲しくなった時は拡張機能でカスタマイズも可能。

HTMLを書くための基本的な機能の他、マクロ機能やバックアップ機能など珍しい機能もつけられます。

動作も軽いですが、行が増えてくるとだんだん重くなってくるようです。長いコードを書くのはあまり向いていません。

またメニューは日本語にできるものの、ヘルプは全部英語なのも注意しましょう。


サクラエディタ

公式サイト・ダウンロード:https://sakura-editor.github.io/

Windowsのテキストエディタといえば、サクラエディタもおすすめです。日本製なので、メニューももちろん日本語になります。

入力補完やコードの自動整形など、自動で画面を見やすくしてくれる機能がたくさんついているのが特徴です。バックアップもしてくれるので、もしもの時にも安心ですね。

HTMLだけでなく、C言語やJavaなど他の言語にも広く対応しています。

いくつか拡張ツールはありますが、標準機能が充実しているのでなくても十分でしょう。最初から機能がたくさんついているため、初心者には少し複雑に感じるかもしれません。


【Mac専用】おすすめHTMLエディタ2選

白いノートパソコン


次に、Macで使えるHTMLエディタを2つ紹介しましょう。

Windows専用のエディタと同じく、Mac専用でも多くのエンジニアに愛用されているエディタがあります。


mi

公式サイト・ダウンロード:https://www.mimikaki.net/

Mac用のエディタの中で、miは定番ではないでしょうか。日本製なのでデフォルトも日本語になります。。

WindowsのNotepad++のように、直感的でシンプルな使い心地のエディタになります。

一見真っ白で普通のメモ帳のような見た目ですが、タブ表示や分割表示にすることも可能です。HTMLの編集はもちろん、C言語などの他言語にも対応しています。

文字の大きさを調節できないというデメリットはありますが、しっかりプログラミングできます。

シンプルなデザインのWebサイトを作りたい人におすすめです。


CotEditor

公式サイト・ダウンロード:https://coteditor.com/

CotEditorも、miと並んで多くのMacユーザーに愛される日本製のHTMLエディタです。

プログラミングだけでなく、文書作成もできるのが特徴。

そのためか、縦書き表示や文字数カウントなどの珍しい機能もあります。

特に便利なのがスニペットと呼ばれるキーバインド機能。設定するとキーを押すだけで自動的にタグを入力してくれます。

手間を省けるだけでなく、スペルミスも回避できるので一石二鳥です。

Markdownにも対応していますが、こちらを使うとプレビューが見られなくなるので注意が必要です。


オンライン系HTMLエディタ2選

Webページのソースコードを書く男性


HTMLエディタにはオンラインで使えるものもあります。これらのエディタは、インストールする必要がなくその場で手軽に使えるのが魅力です。

しかもネットに繋がっていれば良いので、動作環境に左右されないのも嬉しいところです。

気軽に使えるオンラインのHTMLエディタを2種類紹介します。


Liveweave

URL（英語）:https://liveweave.com/

HTMLやCSS、JavaScriptなどメジャーなプログラミング言語のコーディングができるエディタです。

リアルタイムでプレビューが見られるので、編集や調節も楽に行うことができます。

開くと最初から必要最低限のコードが入力されており、言語にあまり慣れていない人でも手軽に編集可能。

ちなみにコード編集だけではなく、ペイントもできるという変わった機能もあります。


HTML5-Editor.Net

URL（英語）:https://html5-editor.net/

HTMLのコーディングに特化したサイトです。

今まで紹介したエディタはコードを書いてから、Web上でどのように見えるか確認するタイプでした。

しかしこのHTML5-Editor.Netは、Webで表示される部分を編集する形式になっています。

つまり、ブログの投稿画面のような感覚でページを編集することができるのです。

HTMLに慣れていない人や、思い通りの見た目にする入力の仕方が分からない人に良いでしょう。


Linuxでも使えるHTMLエディタ

Linuxと二進数


WindowsやMacではなく、Linuxをメインで使っている人もいるのではないでしょうか。

「Linuxだと動かないのでは？」と不安を感じるかもしれませんが、ご安心ください。Linuxでも動作するHTMLエディタもあります。


Linuxでも動作するHTMLエディタ4つ

ここまで紹介してきたエディタの中で、Linuxにも対応しているのは以下の4つです。

  • Visual Studio Code
  • Atom
  • Sublime Text
  • Liveweave

いずれも人気のあるエディタですね。

OSを変えた後も引き続き使いたいという人や、汎用性の高いものを使いたいという人はこの中から選ぶと良いでしょう。


Linux専用のおすすめHTMLエディタ2選

もちろん、Linux専用のHTMLエディタもあります。

特におすすめなのがこの2つ。

  1. Screem
  2. Quanta Plus

Screemは高機能な割に非常にシンプルで、使い勝手の良いHTMLエディタです。HTMLをメインに書きたいならこちらが良いでしょう。

Quanta PlusはHTML用のエディタというよりは、コードエディタと呼ぶ方が近いかもしれません。多くのプログラム言語を使う人はこちらがおすすめです。

Screemの公式サイト・ダウンロード（英語）:http://www.screem.org/

Quanta Plusのダウンロード（英語）:http://www.tucows.com/preview/55544/Quanta-Plus


自分に合ったHTMLエディタを見つけよう



おすすめのHTMLエディタを解説しました。

HTMLエディタはたくさん種類があるため、どれを使えば良いのか迷ってしまうでしょう。ですがそのエディタごとに得意分野や特徴は違います。

何より大切なのは、そのエディタが自分の目的や感覚に合っているかどうか。

選ぶ時のポイントを押さえて、自分と相性ピッタリなHTMLエディタを見つけましょう。