フリーで使えるものばかり!HTMLを書けるおすすめのエディタ10選|現役エンジニアが紹介

初心者向けにHTMLを書けるおすすめのエディタをまとめて紹介しています。どれもフリーで使えるものばかりなので、これからHTMLやCSSなどデザインやプログラミングを始めようと思っている方はぜひ参考にしてみてください。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

今回はエディタの解説をします。

HTMLのコードをメモ帳で実装すると、全て黒色で表示され、非常に見づらいです。

この問題を解決するために、HTMLエディタを利用することで、例えば要素、属性、値などで自動的に別の色で区別して表示してくれる機能があります。

今回は、そのような機能を持つHTMLエディタを紹介していきます。

ぜひ自分に合ったものを比較検討してみてください。

目次

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLを書けるおすすめのエディタ10選について詳しく説明していくね!

大石ゆかり

お願いします!

 

エディタの選び方【前提条件】

  • 無料か有料か
  • Windows/Mac/Linuxのどれか
  • GUI/CUIか

で最適なエディタが決まります。

詳しく解説していきます。

 

無料か有料かで選ぶ

エディタによっては無料・有料それぞれあります。

無料だから使い悪いというわけではないです。

無料であっても、寄付を募っていたり、法人で利用する場合のみ有料になるものなど様々です。

作者ページ経由で別の仕事や別の製品を販売するためにあえて無料で提供しているものもあります。

もちろん、有料のものは最初から必要な設定や機能が揃っているという理由で、有料だからこそのメリットを享受できます。

手間と時間を節約したい場合は有料のエディタを利用することも選択肢に入れてみると良いです。

 

Windows/Mac/Linuxの対応OSで選ぶ

現在利用しているPCのOSによって、Windows/Mac/Linuxどれかに分かれていると思います。

この記事自体が初心者向けのため、基本的にはWindowsかMacのどちらかを利用されていると思います。

エディタによってはWindowsかMacどちらかにしか対応していないものもあります。

もし、利用したいエディタが利用中のOSに対応していたら、ぜひ使ってみてください。

 

GUI/CUIかで選ぶ

GUI(Graphical User Interface)というのは、WindowsやMacを操作する時に、マウスでアイコンをダブルクリックしてアプリケーションを起動するような操作方法を意味します。

CUIとは、マウスを利用せずキーボードを利用して、コマンドでアプリケーションを起動するような操作方法を意味します。

CUIがなんの略語かに関しては、次のようにいくつかの種類があります。

 

キャラクター・ユーザー・インターフェイス (character user interface)

キャラクターベース・ユーザー・インターフェイス (character-based user interface)

コンソール・ユーザー・インターフェイス (console user interface)

コマンドライン・インターフェイス (command line interface)

 

GUIのほうが初心者向きなので、GUIで利用できるエディタを選ぶと良いですよ。

今回は、初心者でもわかりやすいGUIで利用するエディタを紹介します。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

エディタの選び方【絞り込み】

  • 自分の用途に合っているか
  • 動作環境やOSは問題ないか
  • 日本語に対応しているか
  • 動作スピードは問題ないか
  • 他の言語にも使用できるか(HTMLオンリー)

で使用エディタを絞り込みます。

詳しく解説していきます。

 

日本語への対応

エディタによっては日本語に対応していないものもあります。

英語が得意な人は良いですが、そうでない人は日本語に対応しているエディタを利用すると良いです。

今回は初心者でもわかりやすい、日本語化が可能なエディタのみを紹介しています。

 

動作スピード

どんなに機能豊富なエディタであっても、動作スピードが遅い場合は使いづらいです。

そのため、動作スピードが遅くないものを選ぶと良いです。

今回紹介しているエディタは、どれも動作スピードが早いものばかりです。

 

対応言語

基本的にエディタはHTMLの編集をすることが可能です。

そして、HTML以外の言語も編集可能なものも多いです。

HTML以外の言語も利用したい場合は、HTML以外の言語にも対応しているか調べると良いです。

 

テキストエディタの紹介

秀丸

HTMLエディタ以上の機能をもつ高速なエディタです。

有料ソフトですが、試用可能です。

ライブラリを追加することで、JavaScript、PHP、Ruby、Pythonなど非常に多くの言語で利用可能です。

秀丸

 

GVIM

GVIMはVIMというCUIで利用するテキストエディタをGUIで利用可能にしたものです。

プラグインを利用することでHTML以外にもJavaScript、PHP、Ruby、Pythonなど、ほとんどの言語に対応しています。

動作も非常に高速で、独自のキーバインドでキーボードだけで操作を完了できます。

もちろん無料です。

GVIM

 

Visual Studio Code

マイクロソフトが公開している無料のエディタです。

Windows/Mac/Linuxで利用可能です。

シンプルなエディタよりも高速だといわれることもありながら、JavaScript、PHP、Ruby、Pythonだけでなく、プラグインを利用してほとんどの言語に対応しています。

Visual Studio Codeez-HTML

 

TeraPad

html12_02

非常にシンプルな使いやすいテキストエディタです。

余計な機能が付いていないので、機能が多すぎて使いにくいという事がなくなります。

そのため、HTMLの勉強に集中したい初学者の方におすすめのエディタです。

Perl・PHP・CSS・Ruby・C++・Javaなどの言語でも利用できます。

TeraPad

 

Atom

html12_03

かの有名なGithubが作成したテキストエディタです。

HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語に対応しており、これから先勉強の幅を広げていきたい方におすすめです。

また、パッケージをインストールする事でどんどん自分好みにカスタマイズする事もできます。

Atom

 

Sublime Text 3

html12_04

Webデザイン界隈で非常によく使用されているエディタです。

カスタマイズ性、機能性を兼ね備えており、誰にでもとっつきやすくなっています。

HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。

また、多数の人が使用しているので、エディタの事で困った事があったら、ネットに情報が多く載っているので解決に戸惑いにくいのも良いポイントです。

Sublime Textの使い方

 

StyleNote5

html12_05

StyleNote5はその名の通りとてもスタイリッシュなエディタです。

カスタマイズ性はありませんが、初期の段階でHTMLコーディングに困らない機能が十分備わっています。

StyleNote5

 

Aptana Studio

html12_06

メジャーとは言えませんが愛用者の多いAptanaStudioです。

HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。

エディタの内容的には少し中級者向けのところはありますがその分慣れればとても使用しやすいエディタです。

Aptana Studio

 

 

Crescent Eve

html12_08

HTMLのみに対応していますが、とてもシンプルで使いやすいエディタです。

タグの自動補完機能や、文法チェック機能など、シンプルな機能のみを使いやすく実装してあるため、非常に使用しやすいです。

Crescent Eve

 

Notepad++

html12_10

すっきりとしたインターフェイスで、動作が軽いエディタです。

手書きでどんどんHTMLを書いていきたい方におすすめです。

HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。

Notepad++

 

(比較用の表)

エディタ名 OS HTML以外の対応言語 無料
秀丸 Windows 拡張機能利用でほとんどの言語に対応 有料(試用可)
GVIM Windows 拡張機能利用でほとんどの言語に対応 無料
VSCode Win/Mac/Linux 拡張機能利用でほとんどの言語に対応 無料
TeraPad Windows Perl・PHP・CSS・Ruby・C++・Java 無料
Atom Win/Mac/Linux 拡張機能利用でほとんどの言語に対応 無料
Sublime Text Win/Mac/Linux 拡張機能利用でほとんどの言語に対応 無料
StyleNote5 Windows HTMLのみ 無料
Aptana Studio Win/Mac 拡張機能利用でほとんどの言語に対応 無料
Crescent Eve Windows HTMLのみ 無料
Notepad++ Windows 拡張機能利用でほとんどの言語に対応 無料

 

 

以上、HTMLで使えるエディタをまとめて紹介しました。

エディタによって使える機能も変わるので、自分に合ったものを選びましょう。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動:小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!