アプリ

HTMLエディタおすすめランキング|Webデザイナーが選んでみた

editor-html

おすすめのHTMLエディタを紹介します。

HTMLエディタとはHTMLなどの構文を記述することに特化したテキストエディタの総称で、別名でコードエディタなどと呼ばれています。

今回は、数あるHTMLエディタ中で、僕がWebデザイナーという立場で使ってみて良かったと思うものをピックアップします。

参考にしてもらえれば幸いです。

おすすめのHTMLエディタランキング

8位 Dreamweaver CC

Dreamweaver

まず紹介するのがDreamweaver。言わずと知れたド定番ソフトです。

古くからWeb業界で使われてきたツールである上に、Adobe Creative Cloudに加入すれば利用できることもあって、Webをやらない人にもお馴染みかもしれません。

最大の特徴はとにかく高機能なところ。ただ単にHTMLエディタとして高機能なのではなく、Web制作ツールとして総合的に高機能なのです。なので純粋なHTMLエディタを求める制作者には避けられる傾向があります。最近はBootstrapと連携してレスポンシブなWebサイトが作れるようになったり、PHPやGitにも対応したりしましたが、そういった機能が加わることこそDreamweaverが総合的なWeb制作ツールであることの証明と言えるでしょう。

では、どういうところにDreamweaverを使うメリットが生まれるのかというと、それはテンプレート機能です。テンプレート機能とはグローバルナビなどの各ページで共通する部分をテンプレート化できるというもので、テンプレート化しておけば何百ページだろうと一気に修正をすることが可能になります。InDesignのマスターページ的な概念と言えばわかりやすいでしょうか? ですので、大規模なサイトを管理する場合や、とにかく効率的に制作を進行させたい場合などにDreamweaverはうってつけと言えます。

  • 有料
  • MacOS、Windowsに対応
  • ある程度知識のある人向け
  • 大規模サイトに強い
  • 日本語対応

Dreamweaver CC公式サイト

7位 Liveweave

Liveweave

オンラインで使えるエディタ。公式サイトにアクセスするだけで使えます。

画面は4分割されていて、左上がHTML、左下がCSS、右上がJavaScript、右下が仮想ブラウザとなっています。例えばJavaScriptを使う場合は、メニューのLibraryからjQueryを選べばすぐHTMLに反映されるので、使い勝手は非常にいいです。またメニューのTeam Upを選べばユーザーを招待することも可能で、チームでの開発もできるようになっています。

作成したコードは会員登録をしてアカウントを作れば、共有URLとして保存できます。

  • 無料
  • 要会員登録
  • 簡単、シンプル、わかりやすい
  • ネットとブラウザさえあればどんな環境でも作業できる
  • 日本語非対応(英語)

Liveweave公式サイト

6位 StyleNote

Stylenote

HTMLエディタをそこまで本格的に使わない人におすすめなのがStyleNote。これはタグをいちいち手打ちするのではなく、クリックしてタグを選んで挿入していくという挿入型のHTMLエディタとなります。

HTMLやCSSの構文はStyleNoteの中に用意されていますので、後はそれを選んでいけばWebページは完成します。もちろん直接手打ちも可能。プレビュー画面でブラウザでの見え方をシミュレーションしながら作業することもできます。

  • 無料
  • 挿入型のHTMLエディタ
  • Windowsのみに対応
  • 日本語対応

StyleNote公式サイト

5位 Visual Studio Code

VSCode

Visual Studio Code(VSC)はMicrosoftが提供しているオープンソースのHTMLエディタです。

売りはオープンソースであるが故の拡張性の高さ。拡張機能をインストールすれば、自分好みの便利なエディタにできます。後述するAtomやSublime Textと同じタイプ。

ただ、少しマイナーなので拡張機能の種類が少なかったり、AtomやSublime Textと比べて起動が少しもっさりしているのでこの順位になりました。またMacの場合、たいていのコマンドは command + ? で実行可能ですが、このVSCは command + shift + p でコマンドパレットを出してそこから実行していくというスタイルです。なので、そのあたりのエディタの癖を受け入れられるならこのエディタは十分ありとなるでしょう。

  • 無料
  • オープンソース
  • MacOS、Windows、Linuxに対応
  • 少し癖がある
  • 日本語対応

Visual Studio Code公式サイト

4位 Atom

Atom

AtomはGitHubが提供しているオープンソースのHTMLエディタ。

GitHubの会社が展開しているだけあって機能拡張のプラグイン(パッケージ)が充実しています。パッケージをインストールすれば、自分好みの便利エディタになるでしょう。

1万行以上の少し長めのソースコードを開くと途端に動きがもっさりしだすという欠点もありますが、オープンソースなのでそういった不具合は今後のアップデートで改善されていくはずです。インストール時は英語ですが、パッケージで簡単に日本語化可能。

  • 無料
  • オープンソース
  • 拡張プラグインが充実
  • MacOS、Windows、Linuxに対応
  • 日本語対応

Atom公式サイト

3位 Sublime Text 3

Sublime

HTML、PHP、Rubyとフロントエンド作業に一通り対応できるのがこのSublime Text。

HTMLコーダーだけでなく、フロントエンドのエンジニアにも支持されています。動作が軽くて、安定しているのが人気の理由でしょう。

そして、これもVSCやAtom同様プラグインを導入して拡張することが可能。でもオープンソースではないので、初心者には拡張していくのが少し難しいかもしれません。Atomと同じく最初は英語ですが、プラグインで日本語が使えるようになります。

  • 80ドル
  • プラグインで拡張できる
  • MacOS、Windows、Linuxに対応
  • 日本語対応

Sublime Text公式サイト

2位 Coda 2

Coda2

Dreamweaverの代替エディタとして一世を風靡した感のあるCoda。

インターフェースが綺麗でわかりやすいのはもちろんなんですが、何よりも手打ちする時にコードの候補を予測して自動で補完してくれるところが最高です。一度使ってしまうと便利すぎて手放せなくなる人が続出しました。

ただ、Codaが登場したあたりからオープンソースのHTMLエディタが主流になってAtomやSublime Textに切り替える人が増えました。まあ、そのあたりは時代の流れなんでしょう。でも、AtomやSublime Textの場合、機能拡張をインストールすることが前提となっているので、初心者には少し敷居が高いんです。その点、Codaならはじめから大半の機能を備えているので、悩んだりすることなくスタートすることができます。

  • 9,800円
  • MacOSのみに対応
  • 日本語対応

Coda公式サイト

1位 Brackets

Brackets

1位はBrackets。

BracketsはAdobeがオープンソースで提供しているHTMLエディタです。以前はAdobe Edge Codeという名前でAdobe Creative Cloudからリリースされていましたが、今はBracketsに一本化されました。

Bracketsの売りは、AtomやSublime Textと同じく拡張機能のプラグインが豊富にそろっているところ。ただ、最初の状態でもうクオリティが高く、インストールした瞬間から特に何も設定せずに普通に使えるのが1位とした理由です。

個人的に手放せない機能は「クイック編集」。例えばHTMLファイル上の <div class="container"> のclass名部分でクイック編集を行うと(右クリックで選べます)、それに該当するCSS(CSSファイルの.containerの部分)がすぐ下に表示されて直接編集が可能となります。いちいちHTMLファイルとCSSファイルを行ったり来たりする必要がないので、作業効率が大幅に上がります。

動作も軽く、無料で使えるので、とりあえずこれを選んでおけば間違い無いでしょう。PhotoshopのPSDファイルから直接画像を書き出せるなど、Adobe Creative Cloudとの親和性も高いです。

  • 無料
  • オープンソース
  • 拡張プラグインが充実
  • MacOS、Windows、Linuxに対応
  • 日本語対応

Brackets公式サイト

あとがき

無料であること、初心者でも扱いやすいこと、Creative Cloudと親和性が高いことを重視してBracketsを1位としました。

ただ、1位〜5位のHTMLエディタであるならば、どれを使っても間違いではありません。Web制作の現場ではどれも普通に使われています。

とりあえず、今回紹介したエディタのほとんどは無償でインストールできるので、まずは一通り触ってもらえればと思います。

-アプリ

Copyright© ゆるくやって人生優勝 , 2019 All Rights Reserved.