一歩ずつ学ぶ

最終更新日:
スポンサーリンク

HTMLエディタのおすすめを複数紹介(フリーで高機能)

HTMLを記述する場合に使える 無料で高機能なおすすめHTMLエディタを紹介します。

自分でHTMLタグを記述できるようになるとHTMLサイトはもちろん、 ブログ記事を書く時にも応用できます。

HTMLは普通のテキストエディタでも記述できます。 ですが、HTMLエディタを使った方がよりスムーズに記述できます。

それぞれのソフトに特徴があるので複数使ってみて、 自分に一番合うHTMLエディタを選ぶのが良いと思います。

それではさっそく紹介してきます。

Brackets

Brackets』はAdobe Systemsが開発したウェブ製作用テキストエディタです。 クロスプラットフォーム対応で、Windows、Mac、Linuxなどで使ます。 ウェブ制作を目的としたエディタですが、主要な言語約30種類以上をサポートしています。

Bracketsの便利な機能の1つにライブプレビュー機能があります。 これはライブと付いている通り、リアルタイムでHTMLやCSSの変更が反映されるプレビュー機能です。

Bracketsは拡張機能(エクステンション)をインストールすることで便利な機能を追加できます。
「emmet」や「スニペット」、「アウトライン」機能も拡張機能としてインストールして使えます。

HTML用のエディタとしては現時点で一番おすすめのエディタです。

★ Bracketsのサイトはコチラ

Brackets

Atom

Atom』はGitHubが開発したテキストエディタです。 Windows、Mac、Linuxなどで使えるクロスプラットフォームです。 HTMLはもちろん主要なプログラミング言語に対応しています。

パッケージが多数開発されていて、パッケージをインストールすることにより 機能をどんどん拡張していけます。

「atom-html-preview」というパッケージをインストールすることで プレビュー機能も使えますから便利です。

Atom』はプログラミング用エディタとして要注目のエディタです。 一度試してみる価値はありますよ。

★ Atomのサイトはコチラ

Atom

Visual Studio Code

Visual Studio Code』は、マイクロソフトが開発したコード編集に特化した 無償のエディタです。マイクロソフトとしては初めてのクロスフォームのコードエディタで、 Windows,Mac,Linuxに対応しています。

主要な開発言語はサポートされていますから、HTML、CSS、JavaScriptはもちろん、 他の言語も多数サポートされています。

マイクロソフトが開発しただけあって、入力補完機能が優秀なのが 特徴としてあげられます。

統合開発環境の「Visual Studio」を使うほどでもないけれど、 マイクロソフトの製品を使ってみたい方にはオススメのエディタです。

★ Visual Studio Codeのサイトはコチラ

Visual Studio Code

スポンサーリンク

Notepad++(ノートパッドプラスプラス)

(Windows環境)

Notepad++』はHTMLはもちろん、他の多くのプログラム言語に対応しています。 海外で開発されたエディタで、世界中のプログラマーから評価されているエディタです。

以前は最初に日本語化の作業が必要でしたが、現在は最初から日本語が問題なく表示されています。

Notepad++はプラグインがたくさん開発されていて、プラグインによって機能を拡張します。 「HTML Preview」というプラグインを使用すればプレビュー機能が使えます。

「NppFTP」というプラグインを使うと、サーバー上のファイルを直接編集できます。 わざわざFTPソフトでアップロードする必要がないので結構便利です。

HTMLタグに関しては、閉じタグを自動で入力するかどうかを設定画面で選択できます。 HTMLだけでなく、CSS、JavaScript、PHP用としても使えますのでおすすめのエディタです。

★ Notepad++のサイトはコチラ

Notepad++

Crescent Eve

Crescent Eve』はシンプルかつ軽量なHTMLエディタです。 入力補助や文法チェック、プレビュー機能等、 HTML入門者に役立つ機能が多数あります。 HTMLだけでなく、CSSにも対応しています。

普通のエディタとしても充分に使えるほどの機能がありますので おすすめのソフトです。

★ Crescent Eveのサイトはコチラ

Crescent Eve

StyleNote

StyleNote』は名前の通りスタイリッシュなインターフェイスで、かつ高機能なHTML/CSSエディタです。 入力支援、プレビュー、豊富な編集機能があります。

マウスのホイールを回転させることでパラメータ値を変更できるホイールインプット機能等、 独特の機能も搭載されたソフトです。

StyleNoteはリンクウェアとなっています。

★ StyleNoteのサイトはコチラ

StyleNote

HTML EDITOR

HTML EDITOR』はオンラインHTMLエディタです。 ワープロ感覚で文章を入力して、ソースを取得できます。 画面上タブが2つあります。「エディタ」タブと、「ソース」タブの2つです。 文章は「エディタ」タブで入力し、 入力が終わったら「ソース」タブに切り替えてソースを取得します。

画面をみるとわかるのですが、編集用のアイコンがたくさん並んでいます。 ですからワードなどの日頃使っているワープロソフトを使っているような感じで 入力できると思います。

★ HTML EDITORのサイトはコチラ

HTML EDITOR

HTML Instant

HTML Instant』もオンラインHTMLエディタです。 左側にソースを記述して、右側にプレビューが表示されます。

左側の上部にタグを入力するボタンが並んでいます。 hタグ、pタグ、strongタグ、imgタグ、tableタグなどの主要なタグは画面上からクリックで入力できます。

ソースの入力と同時に右側でプレビュー画面を見ながら入力作業ができるため、すぐに表示結果をみたい方には便利です。

★ HTML Instantのサイトはコチラ

HTML Instant

HTML おすすめ書籍

HTMLの入門者向けにおすすめの本を紹介しています。

↑ PAGE TOP