HTMLやCSSを書くときに毎日触る道具が「テキストエディタ」です。Webと関わりのない仕事から40歳でこの世界に入った私は、これまでに3つのエディタを使ってきました。Atom、Visual Studio Code（VS Code）、そしてCursorです。
この記事では、それぞれを実際に使って感じたことと、2026年の今これから始める人がどれを選べばいいか、最初にやっておく設定までをまとめます。エディタ選びで迷っている時間はもったいないので、結論から書きます。
CONTENTS目次
結論：迷ったらVS Code。AI補完に慣れたらCursorも
| エディタ | 料金 | 向いている人 | 2026年時点の状況 |
|---|---|---|---|
| Atom | 無料 | （今から選ぶ理由はない） | 2022年12月に開発終了。新規インストールはおすすめしない |
| VS Code | 無料 | これから学ぶ人全員。職業訓練やスクールでも標準 | 事実上の標準。無料のAI補完（GitHub Copilot Free）も使える |
| Cursor | 無料プランあり。有料は月額8ドル〜 | VS Codeに慣れていて、AIに作業を任せる割合を増やしたい人 | VS CodeをベースにしたAI特化エディタ。拡張機能もほぼそのまま使える |
※料金は2026年10月時点の各公式サイトの表示です。
これから学ぶ人には、まずVS Codeをすすめます。無料で、使っている人が圧倒的に多く、困ったときの情報が日本語でも見つかりやすいからです。AIによる補完に慣れて「もっとAIに任せたい」と思うようになったら、Cursorを試すとよいでしょう。
そもそもテキストエディタとは
テキストエディタは、文字だけのファイルを編集するためのソフトです。Windowsのメモ帳やMacのテキストエディットも広い意味ではテキストエディタですが、Web制作で使うエディタには、コードを書くための機能が揃っています。
- シンタックスハイライト：タグやプロパティを色分けして表示する。閉じ忘れにすぐ気づける
- 補完：数文字打つと候補を出してくれる。タグ名やプロパティ名を全部覚えていなくても書ける
- 拡張機能：ブラウザで即時プレビューする、コードを自動で整形する、といった機能を後から追加できる
- ファイルツリー：サイト全体のフォルダ構成を見ながら、複数のファイルを行き来できる
Word のような文書作成ソフトでHTMLを書くと、見えない書式情報が混ざって動かなくなります。コードは必ずテキストエディタで書いてください。
最初に使ったのは「Atom」
Web制作の勉強を始めたばかりの頃、最初に使ったのがAtomでした。GitHubが開発した無料のエディタで、当時は「見た目がきれいで使いやすい」「カスタマイズ性が高い」と評判でした。
特に印象に残っているのは、画面の見やすさです。初心者でも迷わないデザインで、テーマやフォントサイズを簡単に変えて自分好みにできました。パッケージ（拡張機能）の導入も分かりやすく、HTMLとCSSを書くには十分な機能が揃っていたので、しばらくメインのエディタとして使っていました。
ただ、Atomは2022年12月に開発を終了しています。今もダウンロードはできますが、セキュリティの更新も新しい機能の追加もありません。今から選ぶ理由はないので、Atomを使っている方はVS Codeへの移行をおすすめします。操作感は近いので、移行はそれほど大変ではありません。
職業訓練で出会った「VS Code」
次に使い始めたのがVisual Studio Code（VS Code）です。職業訓練でWeb制作の授業を受けたとき、このエディタが指定されていました。
VS CodeはMicrosoftが開発している無料のエディタで、現在ではWebデザイナーにもエンジニアにも「標準」と言える存在です。使っている人が多いので、使い方やトラブルの解決法、便利な拡張機能の情報がネット上に豊富にあります。これは初心者にとって最大のメリットです。
使ってみて驚いたこと
実際に使って驚いたのは、軽さと拡張性でした。HTML・CSS・JavaScriptはもちろん、SCSSやReactといった技術にも対応していて、拡張機能を入れることで作業が格段に速くなりました。私が最初に入れて効果を感じたのは次の3つです。
- Emmet：
ul>li*3と打ってTabキーを押すだけで、リストのHTMLが展開される。VS Codeには標準で入っている - Live Server：保存した瞬間にブラウザが自動で更新される。「保存して、ブラウザに切り替えて、再読み込み」の手間がなくなる
- Prettier：インデントや改行を自動で整えてくれる。自分の書き方のクセが残りにくい
VS CodeでもAI補完が使える
この記事を最初に書いた2025年には「Cursorの強みはAI補完」と書きましたが、今はVS CodeでもGitHub Copilotを入れればAI補完が使えます。無料プラン（Copilot Free）では月2,000回のコード補完と50回のチャットが使え、有料のProは月額10ドルです（2026年10月時点）。学習の段階なら、無料枠で十分に体験できます。
AIに特化した「Cursor」
2025年にメインのエディタをCursorに切り替えました。見た目や基本的な操作感はVS Codeとほぼ同じで、最初から違和感なく使い始められました。VS Codeの拡張機能も多くがそのまま使えます。
Cursorの特徴は、AIが最初から組み込まれていることです。HTMLのタグを打ち始めると、次に入力すべき内容や閉じタグまで提案してくれますし、CSSのプロパティも予測して表示してくれます。さらに「このセクションをスマートフォン対応にして」と日本語で指示すると、複数のファイルをまたいで書き換える「エージェント」機能もあります。
料金は、無料プランと、月額8ドルからの有料プランがあります（2026年10月時点）。無料プランではAIの利用回数に制限があるので、本格的に使うなら有料プランが前提です。
一方で、注意点もあります。AIが書いたコードをそのまま受け入れていると、自分で書く力がつきません。学習の段階では、まずAIの補完を切って自分で書き、詰まったときにAIに聞く、という使い方をおすすめします。この理由は第1回「HTML・CSSはどこで習う？」でも書きました。
2026年の変化：AIはエディタの「外」にも広がった
2025年から2026年にかけて、開発の道具は大きく変わりました。エディタの中でAIが補完するだけでなく、Claude CodeやCodexのように、ターミナルから動かしてファイルの作成や修正を丸ごと任せられるAIツールが実務で使われるようになっています。私もいまは、エディタでコードを読みながら、こうしたツールに作業を指示する使い方が増えました。
こうなると、エディタの役割は「書く場所」から「AIが書いたものを読んで、確認して、直す場所」に少しずつ変わっていきます。だからこそ、読めるようになるための基礎はこれまで以上に大切です。エディタ選びに時間をかけるより、どのエディタでもいいので、まず自分の手でHTMLとCSSを書く時間を増やしてください。
VS Codeを入れたら最初にやる5つの設定
これから始める方のために、私が新しいパソコンでVS Codeを入れたときに必ずやる設定をまとめます。拡張機能は、左側のブロックのアイコン（拡張機能）から名前で検索してインストールします。
- 日本語化：拡張機能「Japanese Language Pack for Visual Studio Code」を入れる。メニューが日本語になる
- Live Server：HTMLファイルを右クリックして「Open with Live Server」で、保存のたびにブラウザが自動更新される
- Prettier：入れたあと、設定で「Format On Save（保存時にフォーマット）」をオンにする。保存するだけでコードが整う
- 自動保存：メニューの「ファイル」から「自動保存」をオンにする。保存し忘れて「変更が反映されない」と悩む時間がなくなる
- フォントサイズ：設定で「Editor: Font Size」を14〜16に。40代の目には既定値の12は小さい
慣れてきたら、HTMLのタグを色分けする「Auto Rename Tag」、コードの中の色を見やすくする「Color Highlight」なども便利です。ただし、拡張機能は入れすぎると動作が重くなるので、使っていないものは無効にしてください。
まとめ
- テキストエディタは、コードを書くための機能（色分け・補完・拡張機能）が揃った編集ソフト。Wordなどでは書かない
- Atomは2022年に開発終了。今から選ばない
- これから学ぶ人はVS Code。無料で情報が多く、GitHub Copilotを入れればAI補完も無料枠で使える
- Cursorは、VS Codeに慣れてAIに任せる割合を増やしたくなったときの選択肢
- AIがコードを書く時代だからこそ、「読んで直せる」基礎を先に身につける
エディタは、Webデザイナーにとって毎日触る「相棒」です。ただ、相棒選びに迷う時間より、相棒と一緒にコードを書く時間のほうが、ずっと力になります。まずVS Codeを入れて、今日1つファイルを作ってみてください。
前回はHTML・CSSはどこで習う？、次回はWebデザインにおけるデザインツールは何がいい？です。連載の全体像は第1回の末尾にある一覧からたどれます。
