タグを色分けできるテキストエディタを使う [ホームページ作成] All About

▲ソースの「色分け表示」

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

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

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

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

メモ帳での表示（左上），色分け表示ができるテキストエディタの表示（右下）

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

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

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

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

▲すべて黒色で表示／黒色は本文、色つきはHTMLタグ▲

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

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

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

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

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

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

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