全部無料!HTMLエディタのオススメ10個をご紹介


全部無料!HTMLエディタのオススメ10個をご紹介

実際にHTMLを書く上で問題になってくるのが「どのエディタを使うか」ということです。

完全無料で高機能なエディタを続々と紹介していくので、自分にあったものを探して是非使用みてくださいね。

image

目次
  1. HTMLのオススメ無料エディタを一気に紹介
  2. 1.Atom
  3. 2.Sublime Text
  4. 3.Bracket
  5. 4.Aptana Studio
  6. 6.Crescent Eve
  7. 7.Editor Lite
  8. 5.Liveweave
  9. 8.CotEditor
  10. 9.mi
  11. 10.Notepad++
  12. まとめ

HTMLのオススメ無料エディタを一気に紹介

ここからはHTMLを書くときに使うと便利な、オススメ無料エディタを一気にご紹介していきます。それぞれ特徴的なものばかりですので、自分にあったエディタを見つけてみてください。

1.Atom

image https://atom.io/

世界一有名なソースコード管理システムを提供しているGithubですが、彼らが作成したテキストエディタがこちらのAtomになります。

拡張性が高いのが特徴で、予測変換やキーバインドのカスタマイズによって自分好みのエディタにすることが可能です。

コミュニティが活発であり、専用のテーマやパッケージが充実しています。やや重いのがネックですが、それを補って余りある機能性はメインエディタとして十分なスペックであるといえますね。

利用環境:Windows、MacOSX、Linux

2.Sublime Text

image

https://www.sublimetext.com/

動作が軽く、かつエディタとしての機能性にも定評があるのが、こちらのSublime Textになります。Atomと同じくプラグインが豊富で、自分にあったカスタマイズをほどこすことが可能です。

細かいところでいえば、タブで管理できること、ショートカットがデフォルトでも利便性が高いこと、コードの補完が優秀であることなども魅力ですね。

Dropboxを使用すれば、別のパソコンでも設定ファイルを同期することで環境設定の手間を省くことが可能です。Atomにも負けないくらい機能的なエディタです。

利用環境:Windows、MacOSX

3.Bracket

image

http://brackets.io/

IllustratorやPhotoshopなどのソフトが有名なAdobeが提供しているのが、こちらのBracketです。HTMLを編集するときに、CSSファイルも同時に書き換えたい。そんなときでもBracketであれば、「HTMLファイル編集の画面のままで」CSSファイルを編集することができてしまいます。

どういうことかというと、BracketではHTMLの要素やid、クラスなどの直下に編集ウィンドウを開くことができるのです。ほかにもコードを折りたたんだり、開始タグと終了タグをハイライトしてくれたりと、快適にコーディングを行うための機能がそろっています。

機能の拡張やテーマもそろっているので、無料とは思えないほど心強いエディタといえるでしょう。

利用環境:Windows、MacOSX

4.Aptana Studio

image

http://www.aptana.com/products/studio3/download.html

このAptana Studioは、どちらかと言えばマイナーなエディタの部類になりますが、非常に使いやすいエディタです。Aptana Studioにもコードの補完やハイライト機能などがそろっており、効率的な開発を行うことができる環境としてもバッチリなエディタといえます。

プラグインによる拡張も可能で、日本語化にもしっかり対応していますよ。使っている人が少ないので、困ったときに苦労することがあるかもしれませんが、人とは違ったエディタを使いたいかたにオススメ。

利用環境:Windows、MacOSX

6.Crescent Eve

image

http://www.kashim.com/eve/

シンプルイズベストを体現したかのような、スッキリとした見た目で使いやすいエディタがこちらもCrescent Eveです。文法のチェックやタグの自動補完をしてくれつつ、余計な機能がないので、迷いが少なくて済むエディタといえるでしょう。

多機能でなんでもできるエディタは数多くありますが、シンプルでかつ使いやすさを追求したエディタはなかなかありません。テキストエディタに匹敵する軽さでHTMLを書いていきたいかたはCrescent Eveを検討してみるとよいでしょう。

利用環境:Windows

7.Editor Lite

image

https://chrome.google.com/webstore/detail/editor-lite/nglgdmkkiemejlladcdjegcllaieegoe

パソコンにエディタをダウンロードして、設定して…というのがめんどうなかたは、こちらのEditor Liteを使うとよいでしょう。GoogleChromeというブラウザのプラグインとして動作するエディタなので、一般的なエディタとは言えません。

決して万能なエディタではないので、しっかりコードを書いてサイトを作っていきたいと考えているかたにはオススメしません。

とりあえずお試しでコードを書きたいと思っているかたにオススメ。

利用環境:Windows、MacOSX、Linux 他

5.Liveweave

image

http://liveweave.com/

Editor Liteと同じく、HTML5、CSS3、JavaScriptをリアルタイムで確認しながらコーディングできるエディタがこちらのLiveweaveです。WEB上で手軽に編集することができるので、面倒な設定をしなくてもすぐにコードを書きはじめることができます。

デフォルトで「HTML、CSS、JavaScript、プレビュー」の4画面に分割しているので、自分の書いたコードがどのように反映されるかを確認しながら記述していくことができます。

ただし、JavaScriptのファイルが2つ以上ある場合などは不便に感じることもあるでしょう。ガッツリとサイトを作るわけではなく、WEB上で手軽に簡単なコード編集をしたいときに使えるエディタですね。

利用環境:Windows、MacOSX、Linux 他

8.CotEditor

image

https://coteditor.com/

国産のテキストエディタで、日本語のインターフェイスがデフォルトで設定されているのが特徴です。改行コードやエンコーディング、検索と置換など、HTMLをはじめとしたコードの記述に便利な機能を備えています。

なので、しっかりしたサイトをコーディングしたいときにも十分対応できますよ。見た目はメモ帳ソフトと大差がないくらいのシンプルさですが、使い勝手は比較にならないほどこちらのほうが便利ですね。

こちらはMacのみ対応しています。

利用環境:MacOSX

9.mi

image

https://www.mimikaki.net/

MacOSX対応のエディタとして、CotEditorと同じくらい有名なのがこちらのmi(ミ)です。CotEditorと同じく国産のエディタで、デフォルトで日本語のメニューになっています。

コードを書くための機能は充実しながらもその操作感は軽く、モッサリすることはありません。また、ライブラリも豊富にそろっているので、自分にあったカスタマイズをすることができるでしょう。

そのため、プログラミング初心者から上級者まで幅広く対応しているエディタといえますね。

利用環境:MacOSX

10.Notepad++

image

https://notepad-plus-plus.org/

すっきりとシンプルな見た目で、軽い操作感が特徴のNotepad++。こちらはWindows対応のエディタになります。

標準で入っているメモ帳ソフトと操作方法が似ているので、今までエディタを使ったことがないかたでもスムーズに使えることでしょう。そんなシンプルさを持ちながらも高機能で、どんなパソコンでも軽快にコーディングをすることができます。

こちらは外国産のソフトですが、日本語を含め多言語に対応しているので問題なし。初心者でも迷うことなく操作できるでしょう。Windows環境で軽快なエディタを探しているかたにおすすめ。

利用環境:Windows

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

HTMLを書くために欠かせないエディタで、無料かつ高機能なものを中心にご紹介しました。

エディタは何個ももつ必要はなく、自分にあったものを一つ決めて使うのがおすすめです。プラグインやテーマなどのバリエーション、実際に触ってみた感じなどを参考にしながら、お気にいりのエディタを見つけてみてください。

image


黒田剛司
この記事を書いた人
黒田剛司
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp