Webデザインやプログラミングの第一歩として、誰もが通る道が「HTML」と「CSS」です。そして、これらを最も効率よく、かつ楽しく学べるツールが、世界中のエンジニアが愛用するVisual Studio Code（VSCode）です。
「VSCodeをインストールしたけれど、どこから書き始めればいいかわからない」「ファイルを作ったのにブラウザに映らない」といった悩みを抱えていませんか？
本記事では、VSCodeを使ったHTML/CSS開発の「最初の一歩」から「ブラウザの確認」までを、どこよりも丁寧に解説します。この記事を読み終える頃には、あなたは迷うことなく自分の手でWebページを作り始められるようになっているはずです。
VSCodeでHTML/CSSを書く前に準備するもの
コードを書き始める前に、まずは「道具」と「場所」を整える必要があります。ここでつまずくと後々の作業がスムーズに進まないため、一つずつ確実に確認していきましょう。
VSCodeのインストールと初期設定
まずはVSCode本体がPCに入っていることが大前提です。まだの方は、以下の記事を参考に準備を済ませてください。
拡張機能「Live Server」の導入
Web制作において「Live Server」は必須中の必須アイテムです。これがないと、コードを書き換えるたびにブラウザを手動で更新する手間が発生し、学習効率が著しく低下します。
作業用フォルダの作成
デスクトップでもどこでも構いませんが、「Web制作の練習用フォルダ」を一つ作成してください。名前は「my-web-site」や「practice」など、半角英数字で付けるのが鉄則です（日本語名はエラーの原因になることがあります）。
VSCodeでHTMLファイルを作成する方法
準備が整ったら、いよいよ最初のファイル「HTML」を作成します。ここは初心者が最もミスをしやすいポイントなので、一歩ずつ進めましょう。
手順1：VSCodeでフォルダを開く
VSCodeを起動したら、まずは先ほど作成した「作業用フォルダ」をVSCodeで読み込ませます。
- 画面左上の「ファイル」＞「フォルダーを開く」を選択。
- 作成したフォルダを選択して「開く」をクリック。
これで、VSCodeの左側（エクスプローラー）に自分のフォルダ名が表示されます。
手順2：新規ファイルの作成
フォルダ名が表示されているエリアの横にある「＋」アイコン（新しいファイル）をクリックします。
手順3：index.htmlとして保存
入力欄に「index.html」と入力して、Enterキーを押します。
ポイント：拡張子の重要性
ここで最も重要なのが、ファイル名の末尾に付く「.html」という拡張子です。 VSCodeは、この拡張子を見て「あ、これはHTMLという言語で書かれたファイルなんだな」と判断し、コードに色を付けたり便利な補完機能を出したりしてくれます。
なぜ「index」という名前にするのかというと、Webサーバーが「そのフォルダの中で最初に表示すべきファイル」として認識する世界共通のルールだからです。命名が決まっていなければ、最初の1枚は必ず index.html にすると覚えておきましょう。
VSCodeでCSSファイルを作成する方法
HTMLが「骨組み」なら、CSSは「装飾（見た目）」を担当します。HTMLファイルとは別に、専用のファイルを作ります。
手順1：style.cssの作成
HTMLの時と同様に、エクスプローラーの「＋」アイコンをクリックし、今度は「style.css」と入力して保存します。
ファイル構成の整理
現在のフォルダ内は、以下のようになっているはずです。
my-web-site（プロジェクトフォルダ）
├── index.html
└── style.cssこのように、HTMLとCSSが同じ階層（同じフォルダ内）に並んでいる状態が、初心者にとって最も管理しやすい理想的な構成です。
HTMLファイルとCSSファイルをつなげる方法
ここがWeb制作における最初の「壁」です。HTMLファイルとCSSファイルは、作っただけでは連動しません。「このHTMLには、このCSSを適用するよ！」という指示をHTML側に書き込む必要があります。
linkタグの記述
index.html を開き、<head>タグの中に以下の1行を記述します。
<link rel="stylesheet" href="style.css">head内に書く理由
<head>タグは、そのページの「設定情報」を書く場所です。ブラウザはページを表示する前に、まず設定情報を読み込みます。
ここにCSSへのリンクを書くことで、「ページが表示される瞬間に、すでにデザインが適用されている状態」を作ることができるのです。
もしこれが <body> （本文）の後に書いてあると、一瞬だけデザインのない素のテキストが表示され、その後に色がつくといった不自然な動作になってしまいます。
HTMLの基本構造を書く方法
いよいよ中身を書いていきます。VSCodeには「一瞬で基本形を呼び出す魔法」があります。
html:5（Emmet）の活用
index.html に、半角で ! （エクスクラメーションマーク）または html:5 と入力してEnterキーを押してください。すると、以下のようなコードが自動生成されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>この<body></body>の中に<h1>や<p>タグなどを使用して内容を書いていきます。
HTMLのタグについて知りたい方は、以下の記事を参考にすることをおすすめします。
実際に自分の手で<body>内に文を書いてみましょう。
titleとbody
- <title>：ブラウザのタブに表示される名前です。
- <body>：実際に画面に映る内容です。ここに書いた文字や画像がユーザーの目に触れることになります。
VSCodeなら、これらを一から手入力する必要はありません。この「爆速で形を作る機能（Emmet）」こそが、VSCodeを使う最大のメリットの一つです。
CSSを書いて見た目を変えてみる
次に style.css を開き、HTMLのデザインを指示してみましょう。
実践的な記述例
以下のコードをコピーして style.css に貼り付けてみてください。
/* 背景色と文字色の変更 */
body {
background-color: #f0f8ff; /* 薄い青 */
color: #333333; /* 濃いグレー */
}
/* 見出しのデザイン */
h1 {
color: #ff6347; /* トマト色 */
font-size: 32px;
text-align: center; /* 中央揃え */
}CSSを書く時は、「どの場所（セレクタ）を」「どう変える（プロパティと値）」という順番で記述します。VSCodeなら、 color: と打つだけで色の候補が四角いアイコンで表示されるため、色の微調整も非常に簡単です。
Live Serverでブラウザ表示する方法
書いたコードがどう見えるのか、ブラウザで確認しましょう。
起動方法
- index.html を開いた状態で、画面の右下にある「Go Live」という文字をクリックします。
- あるいは、エディタ上で右クリックして「Open with Live Server」を選択します。
ブラウザが立ち上がり、先ほど書いた文章がデザインされた状態で表示されれば成功です！
保存時反映（オートリロード）の体験
Live Serverの本当の凄さはここからです。
VSCodeの画面とブラウザを横に並べ、CSSの色を少し変えて「保存（Ctrl + S）」してみてください。ブラウザの更新ボタンを押さなくても、一瞬で色が変わるはずです。この快適なサイクルが、プログラミングを楽しくさせます。
VSCodeでHTML/CSSを書くときによくあるミス
思うように表示されない場合、大抵は以下のいずれかが原因です。
CSSが反映されない
一番多い原因です。
- link タグのスペルが間違っていないか。
- href = “style.css” のファイル名が実際のファイル名と一致しているか。
- HTMLを保存していない（ファイル名の横に白丸が出ていないか）。
ファイル名が違う
HTMLは index.html ですが、よくあるミスが index.html.txt のように二重の拡張子になってしまうことです。VSCodeのエクスプローラーでアイコンの形（<>のマーク）をしっかり確認しましょう。
保存できていない
VSCodeの「自動保存（Auto Save）」をオンにしていない場合、保存するまでブラウザには反映されません。
[設定] ＞ [Auto Save] ＞ [onFocusChange] に設定しておくことを強く推奨します。
linkタグのパスが違う
HTMLとCSSが別のフォルダに入っているのに、ファイル名だけ指定している場合に起こります。初心者のうちは、必ず「同じフォルダ」に並べるようにしましょう。
VSCodeでHTML/CSSを書くときに便利な機能
基本がマスターできたら、以下の機能を使いこなすことでさらに開発が加速します。
- Emmet（エメット）：ul>li*5 と打つだけで、箇条書きリストが一瞬で完成します。
- Prettier：ぐちゃぐちゃになったコードのインデントを、保存時に自動で整えてくれます。
- Auto Rename Tag：開始タグを変えたら、閉じタグも自動で変わるツールです。
こちらについては、以下の「おすすめ拡張機能」の記事で詳しく解説しています。
VSCodeでHTML/CSSを書くときに覚えておきたいポイント
最後に、エンジニアとして長く活躍するために意識すべき「お作法」をお伝えします。
ファイル名をわかりやすくする
Webサイトが大きくなると、ファイルが増えます。
- index.html（トップページ）
- about.html（私たちについて）
- contact.html（お問い合わせ）
このように、一目で中身がわかる英単語を使いましょう。
フォルダ構成を意識する
画像ファイルが増えてきたら、images というフォルダを作ってまとめましょう。
project
├── index.html
├── style.css
└── images/
└── logo.png整理整頓ができるエンジニアは、バグも少なくなります。
こまめに保存して確認する
100行書いてから確認するのではなく、1行書くごとに Live Server で確認しましょう。どこで間違えてたかがすぐに特定できるため、結果として最短で完成させることができます。
まとめ
VSCodeを使ったHTML/CSS開発の流れを復習しましょう。
- フォルダを開く：すべての作業はここから始まります。
- ファイルを作成：index.html と style.css を用意します。
- linkタグを繋ぐ：これを忘れるとデザインが反映されません。
- Emmetで爆速入力： ! を使って基本構造を整えます。
- Live Serverで確認：リアルタイムで変化を楽しみながら書き進めます。
最初は覚えることが多いように感じるかもしれませんが、一度この「型」を覚えてしまえば、世界中のどんなWebサイトも作れるようになります。
