HTMLやCSSの学習を始めようとすると、「コードはどこに書けばよいの？」「メモ帳ではだめなの？」と迷うことがあります。そこで使うのが、コードを書くためのエディタです。
結論から言うと、パソコンでHTML・CSSをしっかり学びたい初心者にはVisual Studio Code（VS Code）がおすすめです。無料で使え、Windows・Mac・Linuxに対応しており、入力補完や色分けなど学習を助ける機能もそろっています。
インストールせず少しだけ試したい場合は、CodePenやVS Code for the Webのようなブラウザ型エディタが便利です。この記事では、HTML・CSSエディタの役割、初心者向けの選び方、おすすめツール、VS CodeでWebページを表示する手順までわかりやすく解説します。
HTML・CSSエディタとは
HTML・CSSエディタとは、Webページを作るコードの入力や編集をしやすくするソフトやWebサービスです。HTMLで文章や画像などの構造を作り、CSSで色、余白、文字サイズなどの見た目を整えます。
上の図では、index.htmlにページの内容を書き、style.cssにデザインを書いています。ブラウザが2つのファイルを読み込むと、コードが実際のWebページとして表示されます。
エディタはWebページそのものを表示するブラウザとは役割が異なります。エディタでコードを書いて保存し、ChromeやSafariなどのブラウザで表示結果を確認する、という流れが基本です。
メモ帳ではなくHTML・CSS向けエディタを使う理由
Windowsのメモ帳やMacのテキストエディットでも、設定を整えればHTMLやCSSを書くことはできます。ただし、学習を続けるならコード編集向けのエディタを使う方がスムーズです。
- HTMLタグやCSSプロパティが色分けされる
- 入力途中のタグやプロパティを候補から選べる
- 閉じタグや括弧の入力を補助してもらえる
- 複数のファイルをフォルダー単位で管理できる
- 拡張機能でプレビューや整形などの機能を追加できる
色分けされていると、タグの閉じ忘れや記号の入力ミスにも気付きやすくなります。初心者にとっては「間違いを減らしながら書ける」ことが大きなメリットです。
HTML・CSSエディタの選び方
インストール型かブラウザ型か
インストール型は、パソコンへソフトを入れて使うエディタです。自分のフォルダーや画像を扱いやすく、本格的にWebサイトを作る学習に向いています。
ブラウザ型は、Webページを開けばすぐ使えるエディタです。準備が少なく、HTMLとCSSを少し試したいときに便利ですが、ローカルファイルの管理や一部機能には制限があります。
対応OSを確認する
Windows専用のエディタもあれば、Windows・Mac・Linuxで使えるものもあります。学校と自宅など複数の環境で学ぶ場合は、同じ操作で使えるマルチOS対応のエディタが便利です。
入力補完と日本語情報の多さを見る
入力補完は、数文字を入力した時点でタグ名やCSSプロパティの候補を表示する機能です。すべてを暗記していない学習初期ほど役立ちます。
使い方を解説する日本語の記事や動画が多いかどうかも確認しましょう。困ったときに同じ画面を見ながら解決しやすくなります。
初心者におすすめのHTML・CSSエディタ5選
| エディタ | 種類 | 料金の目安 | 向いている人 |
|---|---|---|---|
| Visual Studio Code | インストール型 | 無料 | 迷ったらこれを選びたい初心者 |
| CodePen | ブラウザ型 | 無料プランあり | すぐコードと結果を試したい人 |
| VS Code for the Web | ブラウザ型 | 無料 | インストールなしでファイルを編集したい人 |
| Notepad++ | インストール型 | 無料 | Windowsで軽いエディタを使いたい人 |
| Sublime Text | インストール型 | 評価利用可・継続利用はライセンス購入 | 軽快な操作感を重視する人 |
料金や提供機能は変更される場合があります。利用を始める前に、各エディタの公式サイトで最新情報を確認してください。
Visual Studio Code｜初心者の第一候補
Visual Studio Codeは、Microsoftが提供する無料のコードエディタです。Windows・Mac・Linuxに対応しています。
HTMLとCSSの色分け、入力補完、コード整形などを標準で利用できます。拡張機能も豊富なので、学習を始めた後にJavaScriptやPHPへ進む場合も同じエディタを使い続けられます。
ただし、HTMLのライブプレビューは標準機能ではありません。最初はHTMLファイルをブラウザで直接開き、必要になったら信頼できるプレビュー用拡張機能を追加しましょう。
CodePen｜結果をすぐ見たい人向け
CodePenは、ブラウザ上でHTML・CSS・JavaScriptを書き、結果をリアルタイムで確認できるオンラインエディタです。インストールせず、短いコードを試す用途に向いています。
CodePenのHTML欄には、基本的にbody要素の中へ入る部分を書きます。通常のindex.htmlと書き方が少し異なるため、HTMLファイル全体の構造を学ぶときは注意してください。
VS Code for the Web｜ブラウザでVS Codeを試せる
VS Code for the Webは、ブラウザで動くVS Codeです。インストールせずにHTMLやCSSのファイルを開き、色分けや入力補完を使って編集できます。
デスクトップ版と比べると、ターミナルや一部の拡張機能などに制限があります。まず操作感を試し、継続して学ぶと決めたらデスクトップ版へ移る使い方もできます。
Notepad++｜Windowsで軽さを重視する人向け
Notepad++は、Windows向けの無料コードエディタです。画面が比較的シンプルで動作も軽く、まずコードを書くことに集中したい方に向いています。
Macでは利用できないため、複数のOSで同じ環境を使いたい場合はVS Codeの方が選びやすいでしょう。
Sublime Text｜軽快な操作感を重視する人向け
Sublime Textは、Windows・Mac・Linuxで使えるコードエディタです。起動や操作が軽快で、画面もすっきりしています。
無料で評価できますが、継続利用にはライセンスの購入が必要です。費用をかけずに学び始めたい初心者は、まずVS Codeを選ぶとよいでしょう。
初心者にはVS Codeがおすすめ
どれを選ぶか迷う場合は、VS Codeから始めて問題ありません。無料で主要なOSに対応し、HTML・CSSの学習に必要な機能が標準でそろっているためです。
短いコードを今すぐ試したいだけならCodePen、本格的にファイルを作って学びたいならVS Code、と目的で分けると選びやすくなります。
VS CodeでHTML・CSSを書く手順
ここからは、VS Codeを使って簡単なカードを作ります。「作業用フォルダーを作る→HTMLを書く→CSSを書く→ブラウザで開く」という順番です。
作業用フォルダーと2つのファイルを作る
デスクトップなど分かりやすい場所にhtml-practiceフォルダーを作り、VS Codeの［ファイル］→［フォルダーを開く］から選びます。
次に、フォルダー内へindex.htmlとstyle.cssを作成します。拡張子まで正確に入力してください。
変更前のHTMLを書く
まずindex.htmlへ次のコードを入力して保存します。この時点ではCSSを読み込んでいないため、ブラウザには装飾の少ない状態で表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML・CSSの練習</title>
</head>
<body>
<main class="card">
<h1>はじめてのWebページ</h1>
<p>HTMLとCSSをエディタで書いています。</p>
</main>
</body>
</html>index.htmlをダブルクリックしてブラウザで開くと、見出しと文章が表示されます。まだstyle.cssとつながっていないため、背景色や余白は付きません。
CSSファイルを読み込む
HTMLとCSSをつなぐため、head要素内のtitle要素の下へ次の1行を追加します。
<link rel="stylesheet" href="style.css">link要素は、外部ファイルをHTMLへ関連付ける要素です。href="style.css"で、同じフォルダーにあるCSSファイルを指定しています。
style.cssにデザインを書く
style.cssへ次のコードを書いて保存します。背景色、カードの幅、余白、角丸などを指定するCSSです。
body {
margin: 0;
padding: 40px 16px;
background-color: #f1f5f9;
color: #1e293b;
font-family: sans-serif;
}
.card {
width: min(100%, 560px);
margin-inline: auto;
padding: 32px;
border-radius: 16px;
background-color: #ffffff;
box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
box-sizing: border-box;
}
.card h1 {
margin-top: 0;
color: #2563eb;
}paddingは内側の余白、border-radiusは角丸、background-colorは背景色を指定するプロパティです。width: min(100%, 560px)により、画面が狭いときは幅を縮められます。
変更後の表示をブラウザで確認する
2つのファイルを保存し、ブラウザを再読み込みします。薄いグレーの背景に、白いカードと青い見出しが表示されれば成功です。
表示が変わらない場合は、ファイル名がstyle.cssになっているか、link要素のつづりが合っているか、保存後にブラウザを再読み込みしたかを確認してください。
HTMLファイルをブラウザで開く方法
作成したHTMLファイルは、ファイルをダブルクリックする方法と、ブラウザへドラッグ＆ドロップする方法で開けます。詳しい手順と画面例は、次の記事で解説しています。
最初のHTMLは基本テンプレートから書こう
doctypeやmeta要素の意味を含め、HTMLファイル全体の基本構造を確認したい方は、次の記事もあわせて読んでください。
HTML・CSSエディタでよくある疑問
無料のエディタでも問題ありませんか？
はい。HTMLとCSSの学習や一般的なWeb制作なら、無料のVS Codeで十分に始められます。有料エディタは、操作感や特定の機能に魅力を感じてから検討しても遅くありません。
スマートフォンだけでもHTMLとCSSを書けますか？
ブラウザ型エディタやスマートフォン向けアプリを使えば書けます。ただし、複数ファイルの管理や長いコードの入力はパソコンの方が効率的です。本格的に学ぶ場合は、キーボードを使えるパソコンをおすすめします。
ライブプレビュー用の拡張機能は必要ですか？
最初から必須ではありません。まずはファイルを保存してブラウザを再読み込みする基本の流れを覚えましょう。作業量が増えてから、自動再読み込みが必要だと感じた時点で追加すれば十分です。
まとめ
HTML・CSSエディタは、コードの色分けや入力補完によってWebページ作りを助けるツールです。初心者がパソコンで継続して学ぶなら、無料で情報も多いVS Codeを第一候補にするとよいでしょう。
まずはindex.htmlとstyle.cssを同じフォルダーに作り、HTMLからCSSを読み込んでブラウザ表示を確認してみてください。短いコードをすぐ試したい場合は、CodePenなどのブラウザ型エディタも便利です。