フリーで使えるものばかり！HTMLを書けるおすすめのエディタ10選｜現役エンジニアが紹介
初心者向けにHTMLを書けるおすすめのエディタをまとめて紹介しています。どれもフリーで使えるものばかりなので、これからHTMLやCSSなどデザインやプログラミングを始めようと思っている方はぜひ参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はエディタの解説をします。
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で利用するエディタを紹介します。
エディタの選び方【絞り込み】
- 自分の用途に合っているか
- 動作環境やOSは問題ないか
- 日本語に対応しているか
- 動作スピードは問題ないか
- 他の言語にも使用できるか（HTMLオンリー）
で使用エディタを絞り込みます。
詳しく解説していきます。
日本語への対応
エディタによっては日本語に対応していないものもあります。
英語が得意な人は良いですが、そうでない人は日本語に対応しているエディタを利用すると良いです。
今回は初心者でもわかりやすい、日本語化が可能なエディタのみを紹介しています。
動作スピード
どんなに機能豊富なエディタであっても、動作スピードが遅い場合は使いづらいです。
そのため、動作スピードが遅くないものを選ぶと良いです。
今回紹介しているエディタは、どれも動作スピードが早いものばかりです。
対応言語
基本的にエディタはHTMLの編集をすることが可能です。
そして、HTML以外の言語も編集可能なものも多いです。
HTML以外の言語も利用したい場合は、HTML以外の言語にも対応しているか調べると良いです。
テキストエディタの紹介
秀丸
HTMLエディタ以上の機能をもつ高速なエディタです。
有料ソフトですが、試用可能です。
ライブラリを追加することで、JavaScript、PHP、Ruby、Pythonなど非常に多くの言語で利用可能です。
GVIM
GVIMはVIMというCUIで利用するテキストエディタをGUIで利用可能にしたものです。
プラグインを利用することでHTML以外にもJavaScript、PHP、Ruby、Pythonなど、ほとんどの言語に対応しています。
動作も非常に高速で、独自のキーバインドでキーボードだけで操作を完了できます。
もちろん無料です。
Visual Studio Code
マイクロソフトが公開している無料のエディタです。
Windows/Mac/Linuxで利用可能です。
シンプルなエディタよりも高速だといわれることもありながら、JavaScript、PHP、Ruby、Pythonだけでなく、プラグインを利用してほとんどの言語に対応しています。
TeraPad
非常にシンプルな使いやすいテキストエディタです。
余計な機能が付いていないので、機能が多すぎて使いにくいという事がなくなります。
そのため、HTMLの勉強に集中したい初学者の方におすすめのエディタです。
Perl・PHP・CSS・Ruby・C++・Javaなどの言語でも利用できます。
Atom
かの有名なGithubが作成したテキストエディタです。
HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語に対応しており、これから先勉強の幅を広げていきたい方におすすめです。
また、パッケージをインストールする事でどんどん自分好みにカスタマイズする事もできます。
Sublime Text 3
Webデザイン界隈で非常によく使用されているエディタです。
カスタマイズ性、機能性を兼ね備えており、誰にでもとっつきやすくなっています。
HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。
また、多数の人が使用しているので、エディタの事で困った事があったら、ネットに情報が多く載っているので解決に戸惑いにくいのも良いポイントです。
StyleNote5
StyleNote5はその名の通りとてもスタイリッシュなエディタです。
カスタマイズ性はありませんが、初期の段階でHTMLコーディングに困らない機能が十分備わっています。
Aptana Studio
メジャーとは言えませんが愛用者の多いAptanaStudioです。
HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。
エディタの内容的には少し中級者向けのところはありますがその分慣れればとても使用しやすいエディタです。
Crescent Eve
HTMLのみに対応していますが、とてもシンプルで使いやすいエディタです。
タグの自動補完機能や、文法チェック機能など、シンプルな機能のみを使いやすく実装してあるため、非常に使用しやすいです。
Notepad++
すっきりとしたインターフェイスで、動作が軽いエディタです。
手書きでどんどんHTMLを書いていきたい方におすすめです。
HTMLの他にも、JavaScript、PHP、Ruby、Pythonなど主要な言語にも対応しています。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ（比較用の表）
| エディタ名 | 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デザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
