無料＆高機能！ HTMLとCSSに必須、おすすめのエディタ

ホームページ作りに必須のエディタソフト

こんにちは、ホームページ制作のオイゾウです！
HTMLについての話も一通り終わったところで、ここからはホームページのデザインやレイアウトといったスタイルを指定するCSS（カスケーディングスタイルシート）について説明していきたいのですが、その前に！
HTMLやCSSの記述には「テキストエディタ」（エディタ）という、パソコンのメモ帳（Macならテキストエディット）を高機能にしたソフトを使うことをおすすめしたいと思いますので、今回は無料で入手できるエディタを紹介します。

篠田さんプロフィール

川越市内の某お土産屋さん、68歳。
現在は息子夫婦にお店を任せているので半隠居状態。
趣味の家庭菜園をネット上に発信させるため、まずはMacBookを購入し、最近はガラケーからiPhoneに機種変更したばかりの意識高い系（）ご主人。

ジョージさんプロフィール

川越市内で理容室を営む52歳。
趣味はゴルフで、2020年の東京オリンピックのゴルフ競技開催場所が川越（霞が関カンツリークラブ）に決まったことでテンション高め。
理容師としての熱い思いを、ホームページを通じて発信していく予定。

オイゾウ

篠田さんとジョージさん、久しぶりですね。

篠田さん

最近は俺の出番が全然ないじゃんかよ〜！

ジョージさん

俺らがいた方が話が分かりやすいって言われるよ？
もっと出した方がいいんじゃない？

オイゾウ

やっぱりそうですか？
この会話形式もなかなかどうして、意外とめんど・・・

篠田さん

何っ！？
今何て言おうとした！

オイゾウ

す、すみませんでした！
できるだけお二人に登場して頂くように日々がんばりますっ！

篠田さん

なんだよ、分かってるなら別にいいんだけど。

オイゾウ

まあそんな話はいいとして、お二人はHTMLについて理解できましたか？

ジョージさん

正直言うと、ちょっと難しくてよく分からないかな。
最初はもっとこう、感覚的に作れるものかと思ってたんだけど。
文章の前に<p>を入れて、後ろには</p>を入れるわけでしょ。
で、その<p>だけじゃなくて<h1>とか<img>とかいろんな種類があるってことが、ハードル高いなって感じがしてね。

オイゾウ

ジョージさんの仰ることはよく分かります！
でもそんなに心配しなくても大丈夫です、なぜなら・・・

オイゾウ

ということなんですよ！

篠田さん

自分で書かなくてもいいなら、覚えなくてもいいってこと？

オイゾウ

そうとも言えますし、でも部分的に自力で書ける必要性が出てくることが多々あって、そんなときに書けたらより良いですよ、ということです。

篠田さん

要は、書けなきゃダメってことじゃん！

オイゾウ

私が言いたいのは、基本的な構造や知識が備わっていればいくらでも応用が効くので、一気に全部覚えなくても大丈夫ということです。

ジョージさん

了解。
HTMLについてこれまでいろいろ説明してくれてたけど、ちょっとよく分からない部分があったんだよね。

オイゾウ

どの辺が分からなかったですか？

ジョージさん

いや、なんていうか、例えば行の前を空けたり空けなかったりするのはなんでなのかな？　とか。

オイゾウ

あ、これはインデント（字下げ）と言って、コードを読みやすくするために意図的に空けているんです。
ちょっと見てみましょう。

オイゾウ

これはインデントしてないケースです。
では続けてインデントしているケースです。

オイゾウ

いかがでしょうか？
インデントを入れることにより、階層が視覚的に分かりやすくなるのです。
なお、ここではタブによってインデントを入れてますが、半角スペースを入れてもいいですね。
そしてインデント自体はコードの内容自体に影響がありませんので、どうインデントを入れるかということには決まりがありません。
このHTMLソースは17行ですが、実際には何百行となることもあり、またHTML以外にもこれから学んで頂くCSSなどでもインデントを入れることでコードがとても読みやすくなるので、是非活用してみてくださいね。

ジョージさん

それは分かったけど、そのインデント？　のところに薄い線が入ってたり、行の最後に矢印（↓）があるし、あと文字が青とか緑とかカラフルだけど、これは何か意味があるの？

オイゾウ

これはですね、あるソフトを使って書いているので、自動的に線が入ったり、改行の矢印が表示されたり、文字に色が付いたりするんです！

篠田さん

へぇ、それは便利なの？

オイゾウ

とても便利です！
まず、左側を見てください。

オイゾウ

行番号が入っているのが分かると思います。
例えばこれが500行くらいのソースになったとしますよね？
そして、どこかにエラーが出てしまったとします。
そのときにエラーしている箇所を探すだけでも一苦労なんですが、もし何行目にエラーが出ていると分かれば、すぐにエラーしている箇所を見つけ出すことができるんです！

ジョージさん

ふーん、じゃあ文字の色は？

オイゾウ

これはですね、多くのエディタにはこのように自動的に要素や属性などに色を付けてくれる機能が付いているんです！
なのでソースの内容をパッと見で把握しやすくなりますし、例えばスペルミスや、>を抜かしてタグを閉じ忘れてしまったときなどにすぐ見つけることもできます。ちなみに今回使っているエディタソフトはmiというもので、かなり高機能でありながら「無料」なんです！
せっかくですから無料で使えるおすすめのエディタを紹介したいと思います。

Mac編

mi（エムアイ）

かなり昔からあるMac専用に開発されたエディタで（Win版もあり）、HTMLやCSSだけでなくC言語やJAVAなど様々な言語に合わせたモードで書けるのがうれしいです。
また「マルチファイル検索」機能では、そのファイル内だけでなく開いている全てのファイルを検索してくれます。
かなり細かいところまで設定できますので、使いこなすうちにどんどん自分に合う設定に変えていって、コーディングを楽しんでください！

miのダウンロードはこちらから

CotEditor（コットエディタ）

こちらもmiと同じくMac環境でのエディタとしてはとても有名なフリーソフトです。
無料といっても使い勝手も抜群な上に様々な言語にも対応していて、知り合いも含めかなり多くの人が使っているという印象です。
色の設定なんかも簡単にできて、初心者からプロまで幅広く使えるおすすめエディタです！
App Storeからダウンロードできます。

Windows編

Notepad++（ノートパッドプラスプラス）

海外のソフトですが日本語にも対応していて、初心者の方にも使いやすい仕様になっています。
行番号とソースの間に区切りが分かる記号が表示され、どこからどこまでがタグの範囲か分かりやすくなっていてとても便利です。

Notepad++のダウンロードはこちらから

TeraPad（テラパッド）

エディタとしての機能は無料とはいえ十分すぎるほど備わっているので、HTMLやCSSのコーディングであればかなり使いやすいですね。
国産のソフトなのでもちろん日本語表示、すぐに使い始められます。
Windows8まで対応。

TeraPadのダウンロードはこちらから

篠田さん

よし、さっそくインストールするよ！

オイゾウ

篠田さん、珍しく前向きですね？

篠田さん

最近はiPhone買ってからというもの、気になるアプリはとりあえずインストールしてるからね。

ジョージさん

HTMLに関してはある程度書ける気がしてきたけど、CSSっていうのはもっと難しいの？

オイゾウ

どうでしょうか、単純に比較はできませんが・・・。
でもページのレイアウトを整えたり、背景や文字に色を付けたり、楽しいと思いますよ！

ジョージさん

そうなんだ、それは楽しみだね！
うちの理容室は男性で、しかも年配のお客様が多いから、派手な感じというよりは渋くてシンプルな方がいいなと思ってるんだけど。

篠田さん

うちのしのだ屋はね、江戸時代っぽいというか、わりと古風なイメージでいきたいんだよね。

オイゾウ

お二人とも、デザインのイメージがすでにしっかりと出来上ってて素晴らしいですね！
そういったことはCSSでスタイル指定していくことで可能になりますので、次回以降からどんどんやっていきましょう！