HTMLタグやCSSプロパティの色分け表示例
▲ソースの「色分け表示」

HTMLやスタイルシート(CSS)、JavaScriptなどはテキストエディタで編集できます。 Windowsにはテキストエディタとして「メモ帳」が最初からインストールされていますが、必要最低限の機能しかないため、便利だとは言えません。 HTMLやCSSなどを直接編集するなら、タグやプロパティの「色分け表示」が可能で、さらに高度な編集機能を搭載したテキストエディタを使いましょう。

今回は、タグやプロパティの「色分け表示」ができるテキストエディタのメリットと、 お勧めのテキストエディタをご紹介いたします。

色分けできるテキストエディタのメリット

HTMLタグやCSSのプロパティなどを色分け表示できるテキストエディタとは、下図のような表示が可能なソフトウェアのことです。

色分け表示ができるテキストエディタの画面例
メモ帳での表示(左上),色分け表示ができるテキストエディタの表示(右下)

このような「色分け表示」ができるテキストエディタには、以下のような大きなメリットがあります。

(1) タグと文章の違いが一目で分かる
(2) 記述ミス・スペルミスがすぐに分かる
(3) 有効・無効(コメントの範囲)が分かりやすい

タグと文章の違いが一目で分かる

HTMLタグ内部には何らかの色が付加され、それ以外の文章は黒色で表示されるため、タグと文章の違いが一目で分かります。 この違いが分かるだけで、ソース中のどこに何が書かれているのかが探しやすくなります。

タグと文章の違いが一目で分かる例
▲すべて黒色で表示 / 黒色は本文、色つきはHTMLタグ▲

記述ミス・スペルミスがすぐに分かる

HTMLタグは「<」記号で書き始め、必ず「>」記号で閉じなければなりません。 属性値は「"」記号で書き始め、終わりにも「"」記号を書かなければなりません。 これらの対応を忘れると、(ブラウザ上などで)意図通りには表示されなくなります。
ソースが色分けされていれば、1つでも記号が抜けていると色分け表示がおかしくなるため、記述ミスを一目で把握できます。

記述ミスが一目で分かる例
 

上記の例では、属性値の終わりに引用符「"」を1つ記述するのを忘れています。 全部が黒色で表示されていると気付きにくいですが、タグが色分けされていると記述ミスがあることが一目で分かります。 (※本文まで色付きで表示されてしまっている点や、その後の色分けがおかしくなっている点から判断できます。)

また、「HTMLに存在する要素名・属性名」、「CSSに存在するプロパティ名」などに応じて色分け方法(配色)を区別できるテキストエディタでは、スペルミスにも気付くことができます。 (※存在しない名称は異なる色で表示されるため。)

要素名や属性名のスペルミスが一目で分かる例
 

このような些細なミスは、なかなか気付きにくいものです。 しかし、ソースが色分けされていれば、発見が容易になります。

有効・無効(コメントの範囲)が分かりやすい

HTMLでは「<--」から「-->」までがコメントとして扱われます。CSSでは「/*」から「*/」までがコメントとして扱われます。 このコメント機能を利用して、特定の範囲を一時的に無効にする(=コメントアウトする)ことがあります。
複数行を一気にコメントアウトする場合、すべて黒色で表示されていると、どこからどこまでがコメントアウトしている範囲なのかが分かりにくくなってしまいます。 しかし、コメント部分が色分けされていれば、一目でコメントの範囲が分かります。

コメントアウトの範囲が一目で分かる例
▲すべて黒色だと分かりにくい / コメントが緑色なら範囲が明確に分かる▲

上図右側のように色分けされていると、コメントを閉じ忘れた場合には、コメント開始以降に存在するすべての文字が緑色で表示されることになるため、「コメントの閉じ忘れ」に確実に気付くことができます。

このように、色分け表示ができるテキストエディタには、大きなメリットがあります。
なお、テキストエディタのメリットは色分け表示だけではありません。 次のページでは、それ以外のメリットについて簡単にご紹介いたします。

【この記事の目次】

1. 色分けできるテキストエディタのメリット
2. 高機能なテキストエディタを使うメリット
3. お勧めテキストエディタの紹介
4. 色分け表示のカスタマイズ方法やお勧めの設定