HTMLやCSSを書くのに必要なソフトがテキストエディタです。
MacのテキストエディットやWindowsのメモ帳でもHTMLやCSSを書くことは出来ますが、HTMLやCSSを書くための機能が充実したテキストエディタを使った方が効率的にコーディングできます。
僕は今までに20個以上のテキストエディタを色々と試してきました。
その中でHTMLやCSSを書くのにオススメのテキストエディタを3つに厳選したので紹介したいと思います。
目次
HTML・CSSを書くのにオススメのテキストエディタ
僕がHTMLやCSSを書くのにオススメするテキストエディタは以下の3つです。
- Dreamweaver
- Brackets
- Visual Studio Code
Visual Studio CodeとBracketsは無料で利用できますが、Dreamweaverを利用するにはAdobe Creative Cloudを契約する必要があります。
無料のテキストエディタをお探しの場合は、Visual Studio CodeかBracketsから選ぶことになります。
僕の一押しはVisual Studio Codeですが、Visual Studio Codeは少し慣れた方向けだと感じています。
初心者の方はBracketsかDreamweaverがオススメです。
それぞれのテキストエディタの特徴を紹介していきたいと思いますが、その前にHTMLやCSSを書くためにテキストエディタに求める機能を紹介します。
テキストエディタに求める機能
HTMLとCSSを書く上で、個人的に最低限必要だと思う機能を紹介します。
HTMLタグやCSSプロパティの入力補助
HTMLタグやCSSプロパティを全て入力するのはとても大変な作業ですし、全てのHTMLタグやCSSプロパティを覚えていないといけません。
テキストエディタに入力補助機能があれば、頭文字を入力するだけでHTMLタグやCSSプロパティを補完してくれます。
HTMLタグやCSSプロパティを全て入力する必要がないので効率が上がりますし、タグやプロパティをうる覚えでも入力することが出来ます。
ファイルへのパスを補完
HTMLをコーディングしている際に、他のHTMLファイルや画像ファイルへのリンクを記述することがあります。
テキストエディタにファイルパスの補完機能があれば、フォルダ名やファイル名の頭文字を入力するだけで、そのファイルへのパスを補完してくれます。
リンクするファイルまでのパスを手入力するのは意外とめんどくさいものです。
フォルダの階層が深かったり、ファイル名が長かったりすると入力するのが大変ですし、パスを誤入力してしまう可能性も出てきます。
HTMLやCSSのコードハイライト
コードハイライトとは、HTMLタグやCSSプロパティなどを分かりやすく色分けして表示する機能です。
慣れないうちはHTMLやCSSのソースコードは見にくく感じますが、コードハイライトがあるとHTMLタグやCSSプロパティが認識しやすくなります。
ソースコードのオートインデント
テキストエディタのオートインデントとは、改行した際に上の行に合わせてインデントを挿入する機能です。
HTMLをコーディングする際は、ソースコードを見やすくするためにインデントをつけることが多いですが、改行する度にインデントを挿入するのは大変です。
オートインデント機能があれば、いちいち自分でインデントを挿入する必要がなくなります。
HTMLのリアルタイムプレビュー
通常はブラウザでHTMLファイルを開いて確認しながらコーディングしていきます。
HTMLファイルを編集したらブラウザをリロードして確認するという作業を繰り返します。
しかし、テキストエディタにHTMLのリアルタイムプレビュー機能があれば、HTMLやCSSを編集した時点で自動的にプレビューが更新されるので、テキストエディタとブラウザを行き来する必要がなくなります。
以上が個人的にテキストエディタに最低限必要だと思う機能です。
それでは僕がオススメする3つのテキストエディタの特徴を紹介していきます。
Dreamweaverの特徴
DreamweaverはAdobeが開発しているテキストエディタ（Webオーサリングツール）です。
HTMLやCSSをコーディングするための機能が充実していて、初心者には1番使いやすいテキストエディタだと思います。
「ライビュプレビュー」という機能でHTMLやCSSをリアルタイムでプレビューしながらコーディングすることが出来ます。
ライビュプレビューを直接編集することもでき、テキストや画像を直感的に変更することも出来ます。
ライブプレビューはレスポンシブWebデザインにも対応していて、メディアクエリごとの表示を確認しながらコーディングすることが可能です。
「挿入」パネルではHTMLタグを挿入でき、「CSSデザイナー」パネルではCSSの追加や編集が出来るので、HTMLやCSSのソースコードを書かなくてもコーディングすることが出来ます。
慣れてきたらHTMLやCSSのソースコードを書いた方が早いですが、初心者のうちはかなり使える機能だと思います。
「クイック編集」という機能もかなり便利で、スタイルを変更したいHTMLタグで「command +E」をクリックすると、そのHTMLタグに適用されているCSSが表示されて編集することが出来ます。
CSSファイル内から該当箇所を探す作業が不要になるので、かなり作業効率が上がります。
「Extract」という機能では、Photoshopで作成したデザインカンプからテキストやCSSプロパティなどをコピーしたり、要素間のマージンを確認したり出来ます。
例えばExtractパネルでデザインカンプ内のボタンをクリックすると、そのボタンのCSSプロパティが表示されてコピーすることが出来ます。
コピーしたCSSプロパティをCSSファイル内にペーストするだけで、デザインカンプと同じボタンを再現することが可能です。
ExtractはPhotoshopを開発しているAdobeだから実現できる機能だと思います。
このようにAdobeの強みを活かしつつ、HTMLやCSSのコーディングを強力にサポートしてくれるのがDreamweaverの特徴です。
Bracketsの特徴
BracketsもAdobeが開発しているテキストエディタですが、Dreamweaverとは違い無料で利用することが出来ます。
Bracketsにも「ライブプレビュー」という機能があり、HTMLをリアルタイムでプレビューしながらコーディングすることが出来ます。
Bracketsのライブプレビューは、ブラウザのChromeでプレビューを表示するのでライブプレビューでテキストや画像を編集することは出来ません。
あくまでHTMLの表示確認用となりますが、Bracketsでカーソルを合わせたHTMLタグがハイライト表示されるのでとても見やすいです。
Dreamweaverと同じように「クイック編集」にも対応しています。クイック編集の仕様はDreamweaverと同じです。
Bracketsは拡張機能をインストールすることで、必要な機能を追加することが出来ます。
数多くの拡張機能が無料で公開されており、Bracketsを自分に合わせてカスタマイズすることが可能です。
Visual Studio Codeの特徴
Visual Studio CodeはMicrosoftが開発している無料のテキストエディタです。
2015年に登場した後発のテキストエディタですが、アップデートする度に進化していき、今ではメインのエディタとして使っている方も多いです。
Visual Studio Codeは他のテキストエディタと比べて動作がとても軽いです。
ワード検索や置換のスピードも高速で、HTMLやCSSで構成されているプロジェクトなら一瞬で結果が表示されます。
また、動作がすごく安定していて、コーディングや検索の途中で固まったり落ちたりすることがほぼありません。
他のテキストエディタを使っている時は、固まったり落ちたりしてイライラすることもありましたが、Visual Studio Codeを使うようになってからはそのようなストレスから解放されました。
Visual Studio Codeも拡張機能をインストールして機能を追加することが出来ます。
HTMLやCSSのコーディングに慣れてくると、自分にとって必要な機能や不要な機能が分かってくるので、機能をカスタマイズできることは大きなメリットだと思っています。
Visual Studio Codeはワークスペースを縦横自由に分割することが出来ます。
ワークスペースを2分割にしてHTMLとCSSを表示したり、3分割にしてHTMLとCSSとJavaScriptを表示したり出来ます。
HTMLのソースコードを見ながらCSSをコーディングすることが出来るのでとても便利です。
DreamweaverやBracketsは2分割しか出来ませんが、Visual Studio Codeは10以上に分割することもできるので色々な使い方が出来ます。
Visual Studio Codeは標準でターミナルが付いているので、エディタ上でいろいろなコマンドを実行することが出来ます。
僕はSassのコンパイルやタスクランナーGulpの実行に使うことが多いです。
初心者のうちはあまり必要が無い機能かもしれません。
Visual Studio Codeの標準機能にはHTMLのライブプレビューがありません。
拡張機能をインストールするか、Gulpなどでライブプレビューの環境を用意する必要があります。
Visual Studio Codeのメリットは機能のカスタマイズ性の高さと、動作が軽快で安定していることだと思います。
コーディングに慣れてきて、自分好みの機能を持ったテキストエディタを使いたい方にオススメです。
HTML・CSS向けテキストエディタのまとめ
今回はDreamweaver、Brackets、Visual Studio Codeの3つのテキストエディタを紹介しました。
Dreamweaveは標準機能が充実していて、ライビュプレビューやExtractなどで直感的にコーディングが出来るので初心者にもオススメのテキストエディタです。
Bracketsもライビュプレビューやクイック編集などHTMLやCSSのコーディングに特化した機能を標準で装備しています。
拡張機能をインストールすることで必要な機能を追加していけるのも魅力です。
Visual Studio CodeはDreamweaverやBracketsと比べると、標準でHTMLやCSSのコーディングに特化した機能は少ないです。
しかし、拡張機能をインストールすることでDreamweaverやBracketsと同等以上の機能を追加することも出来ます。
自分好みの機能を持ったテキストエディタを使いたい方におすすめです。
テキストエディタは自分との相性もあるので色々と試してみた方がいいと思います。
BracketsとVisual Studio Codeは無料で利用できますし、Dreamweaverも30日間は無料で体験することが出来るのでぜひ試してみてください。
この記事が少しでもテキストエディタ選びの参考になると嬉しいです。
以上、HTMLやCSSのコーディングにオススメのテキストエディタの紹介でした。