【初心者向け】VSCodeでHTML/CSSの開発環境をすぐに整える完全ガイド！

CSS

「HTMLとCSSを勉強したいけど、何を使って書けばいいかわからない…」
「VSCodeって聞いたことあるけど、どうやって使えばいいの？」

そんな悩みを持つあなたにおすすめなのが、Visual Studio Code（VSCode）を使ったWeb開発環境です。

VSCodeは、Microsoftが提供する無料の高機能コードエディタで、HTML/CSSの学習から本格的なWeb制作まで幅広く対応できます。

この記事では、VSCodeを使ってHTML/CSSの開発を始めるための初期設定と便利な使い方を、初心者にもわかりやすく説明していきます。

スポンサーリンク

VSCodeって何？なぜおすすめなの？

VSCodeとは？

Visual Studio Code（VSCode）は、プログラムを書くためのテキストエディタです。

身近な例で説明すると：

  • メモ帳：文字を書くだけ
  • Word：文章を書くのに便利な機能がたくさん
  • VSCode：プログラムを書くのに便利な機能がたくさん

なぜVSCodeがおすすめなの？

1. 完全無料

  • ダウンロードもインストールも無料
  • 有料版への強制アップグレードなし
  • 学生でも気軽に使える

2. 初心者に優しい

  • 日本語対応
  • 操作が分かりやすい
  • エラーを見つけて教えてくれる

3. 高機能

  • HTML/CSSを書くのに必要な機能が全て揃っている
  • 拡張機能で好きなようにカスタマイズ可能
  • プロの開発者も使っている

4. 軽くて速い

  • 古いパソコンでもサクサク動く
  • 起動が速い
  • メモリをあまり使わない

VSCodeをインストールしよう

ダウンロードとインストール手順

ステップ1：公式サイトにアクセス

1. ブラウザで「VSCode」と検索
2. 公式サイト（https://code.visualstudio.com/）にアクセス
3. 大きな「Download」ボタンをクリック

ステップ2：OSに合わせてダウンロード

自動的に判定されますが、確認：
- Windows：Windows版
- macOS：Mac版
- Linux：Linux版

ステップ3：インストール

Windows の場合：
1. ダウンロードした .exe ファイルをダブルクリック
2. 「次へ」ボタンを押していく
3. 「完了」でインストール終了

macOS の場合：
1. ダウンロードした .zip ファイルを展開
2. VSCode アプリをアプリケーションフォルダにドラッグ
3. Launchpad から起動

ステップ4：日本語化（オプション）

1. VSCode を起動
2. 左側の四角いアイコン（拡張機能）をクリック
3. 検索ボックスに「Japanese」と入力
4. 「Japanese Language Pack for Visual Studio Code」をインストール
5. 「Restart Now」をクリックして再起動

初回起動時の確認

インストールが成功していれば：
- VSCode のウィンドウが開く
- 左側にメニューが表示される
- 中央に Welcome タブが表示される

HTML/CSS開発に必須の拡張機能

拡張機能って何？

拡張機能は、VSCodeに新しい機能を追加するためのアプリのようなものです。

身近な例で説明すると：

  • スマホ：最初から電話とメールができる
  • アプリ：ゲームや便利ツールを追加
  • VSCode：最初からプログラムが書ける
  • 拡張機能：より便利な機能を追加

拡張機能のインストール方法

1. 左側のメニューから四角いアイコン（Extensions）をクリック
2. 検索ボックスに拡張機能名を入力
3. 目的の拡張機能を見つけて「Install」をクリック
4. インストール完了後、VSCode を再起動（推奨）

HTML/CSS開発におすすめの拡張機能ベスト5

1. Live Server

何をする拡張機能？

  • 書いたHTMLをすぐにブラウザで確認できる
  • ファイルを保存すると、ブラウザが自動で更新される

使い方：

1. HTMLファイルを右クリック
2. 「Open with Live Server」を選択
3. ブラウザが自動で開いて、作ったページが表示される

なぜ便利？

  • いちいちブラウザを手動で更新しなくてよい
  • リアルタイムで変更を確認できる
  • まるで魔法のように感じる！

2. Prettier – Code formatter

何をする拡張機能？

  • ぐちゃぐちゃになったコードを自動できれいに整理してくれる

設定方法：

1. 拡張機能をインストール
2. ファイル → 基本設定 → 設定
3. 検索ボックスに「format on save」と入力
4. 「Editor: Format On Save」にチェックを入れる

効果：

<!-- 整理前（読みにくい） -->
<div><p>こんにちは</p><span>世界</span></div>

<!-- 整理後（読みやすい） -->
<div>
  <p>こんにちは</p>
  <span>世界</span>
</div>

3. Auto Rename Tag

何をする拡張機能？

  • HTMLタグの片方を変更すると、もう片方も自動で変更してくれる

例：

<!-- <div> を <section> に変更すると... -->
<div>内容</div>

<!-- 自動で </div> も </section> に変わる -->
<section>内容</section>

なぜ便利？

  • タグの閉じ忘れやミスを防げる
  • 修正作業が半分に短縮される

4. CSS Peek

何をする拡張機能？

  • HTMLファイルを見ながら、関連するCSSを直接確認・編集できる

使い方：

1. HTMLファイルでクラス名をクリック
2. 「Go to Definition」または Ctrl+クリック
3. そのクラスのCSSが表示される

なぜ便利？

  • ファイルを行ったり来たりしなくてよい
  • どのCSSがどのHTMLに対応しているかわかりやすい

5. Color Highlight

何をする拡張機能？

  • CSSのカラーコードに実際の色を表示してくれる

例：

/* コード上でも実際の色が見える */
.text {
  color: #ff0000; /* 赤色で表示される */
  background-color: #00ff00; /* 緑色で表示される */
}

なぜ便利？

  • どんな色かすぐにわかる
  • カラーコードを覚えなくてもOK
  • デザインの確認が簡単

HTML/CSSを書くための便利設定

Emmet（エメット）で高速コーディング

Emmetって何？

Emmetは、短い文字を入力すると、長いHTMLコードを自動で作ってくれる機能です。

身近な例で説明すると：

  • 携帯の予測変換：「あり」と入力すると「ありがとう」が候補に出る
  • Emmet：「ul>li*3」と入力すると長いHTMLコードが自動生成される

便利なEmmetの書き方

<!-- 入力：ul>li*3 -->
<!-- Tab キーを押すと以下に展開される -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!-- 入力：div.container>h1+p -->
<!-- Tab キーを押すと以下に展開される -->
<div class="container">
  <h1></h1>
  <p></p>
</div>

<!-- 入力：table>tr*3>td*4 -->
<!-- Tab キーを押すと以下に展開される -->
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

よく使うEmmetの記号

記号意味例
>子要素div>p
+兄弟要素h1+p
*繰り返しli*3
.クラスdiv.container
#IDdiv#header

自動保存の設定

設定方法：
1. ファイル → 基本設定 → 設定
2. 検索ボックスに「auto save」と入力
3. 「Files: Auto Save」を「afterDelay」に変更
4. これで数秒後に自動保存される

タブサイズの設定

設定方法：
1. ファイル → 基本設定 → 設定
2. 検索ボックスに「tab size」と入力
3. 「Editor: Tab Size」を「2」に変更
4. HTMLの見た目がきれいになる

Live Serverでリアルタイムプレビュー

Live Serverの詳しい使い方

基本的な使い方

1. HTMLファイルを作成（例：index.html）
2. ファイルを右クリック
3. 「Open with Live Server」を選択
4. ブラウザが自動で開く
5. ファイルを変更して保存すると、ブラウザも自動更新

HTMLファイルの作り方

1. VSCode で「Ctrl + N」（新しいファイル）
2. 以下のコードを入力：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>私のウェブサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは、世界！</h1>
  <p>これは私の最初のウェブページです。</p>
</body>
</html>

3. 「Ctrl + S」で保存
4. ファイル名を「index.html」にする
5. Live Server で開く

CSSファイルの作り方

1. 新しいファイルを作成
2. 以下のコードを入力：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  color: #666;
  line-height: 1.6;
}

3. ファイル名を「style.css」で保存
4. HTMLファイルと同じフォルダに保存
5. Live Server で確認

Live Serverの便利機能

ポート番号の変更

デフォルト：http://localhost:5500
変更方法：
1. 設定 → 拡張機能 → Live Server
2. 「Live Server: Settings: Port」で番号を変更

自動でブラウザを開かない設定

設定方法：
1. 設定 → 拡張機能 → Live Server
2. 「Live Server: Settings: Do Not Verify Tags」にチェック
3. 手動でブラウザを開きたい場合に便利

おすすめのフォルダ構成

なぜフォルダ構成が大切？

整理されていないフォルダ：

  • ファイルがどこにあるかわからない
  • 修正したいファイルを探すのに時間がかかる
  • 他の人と共有するときに混乱する

整理されたフォルダ：

  • 必要なファイルがすぐに見つかる
  • 作業効率がアップ
  • プロっぽく見える

推奨フォルダ構成

基本構成

my-website/
├── index.html          (メインのHTMLファイル)
├── about.html          (その他のHTMLファイル)
├── css/
│   ├── style.css       (メインのCSSファイル)
│   └── reset.css       (リセットCSS)
├── js/
│   └── script.js       (JavaScriptファイル)
├── images/
│   ├── logo.png        (ロゴ画像)
│   ├── hero.jpg        (ヒーロー画像)
│   └── icons/          (アイコン用フォルダ)
│       ├── facebook.png
│       └── twitter.png
└── fonts/              (フォントファイル)
    └── custom-font.woff

実際のファイルパス例

<!-- index.html から CSS を読み込む -->
<link rel="stylesheet" href="css/style.css">

<!-- index.html から画像を表示 -->
<img src="images/logo.png" alt="ロゴ">

<!-- index.html から JavaScript を読み込む -->
<script src="js/script.js"></script>

フォルダの作り方

VSCode でフォルダを作る方法

1. 左側のエクスプローラーで右クリック
2. 「新しいフォルダー」を選択
3. フォルダー名を入力（例：css）
4. Enter キーで確定

ファイルの移動方法

1. 移動したいファイルをドラッグ
2. 目的のフォルダーにドロップ
3. パスが自動で更新される（場合によっては手動修正が必要）

実際にWebサイトを作ってみよう

簡単な自己紹介サイトを作成

プロジェクトフォルダの準備

1. デスクトップに「my-profile」フォルダを作成
2. VSCode で「ファイル → フォルダーを開く」
3. 作成したフォルダを選択
4. 以下のフォルダ構成を作成：

my-profile/
├── index.html
├── css/
│   └── style.css
└── images/
    └── profile.jpg (自分の写真があれば)

index.html の作成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>田中太郎のプロフィール</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>田中太郎</h1>
    <p>中学3年生</p>
  </header>

  <main>
    <section class="profile">
      <h2>自己紹介</h2>
      <p>こんにちは！田中太郎です。プログラミングと音楽が好きな中学3年生です。</p>
    </section>

    <section class="hobbies">
      <h2>趣味</h2>
      <ul>
        <li>プログラミング</li>
        <li>音楽鑑賞</li>
        <li>読書</li>
        <li>ゲーム</li>
      </ul>
    </section>

    <section class="skills">
      <h2>勉強中のスキル</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2024 田中太郎. All rights reserved.</p>
  </footer>
</body>
</html>

css/style.css の作成

/* 全体のスタイル */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* ヘッダーのスタイル */
header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 2rem 0;
}

header h1 {
  margin: 0;
  font-size: 2.5rem;
}

header p {
  margin: 0.5rem 0 0 0;
  font-size: 1.2rem;
}

/* メインコンテンツのスタイル */
main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

section {
  background-color: white;
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
  color: #333;
  border-bottom: 2px solid #333;
  padding-bottom: 0.5rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #e9e9e9;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border-radius: 4px;
}

/* フッターのスタイル */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
}

Live Server で確認

1. index.html を右クリック
2. 「Open with Live Server」を選択
3. ブラウザでサイトが表示される
4. CSSを変更して保存すると、リアルタイムで反映される

よくあるトラブルと解決方法

トラブル1：Live Server が動かない

症状：

  • 右クリックメニューに「Open with Live Server」が表示されない
  • ブラウザが開かない

解決方法：

1. Live Server 拡張機能がインストールされているか確認
2. VSCode を再起動
3. HTMLファイルで右クリックしているか確認
4. ファイルが保存されているか確認

トラブル2：CSSが適用されない

症状：

  • HTMLは表示されるが、スタイルが反映されない

解決方法：

1. CSSファイルのパスが正しいか確認
   <link rel="stylesheet" href="css/style.css">
2. CSSファイルが保存されているか確認
3. ブラウザのキャッシュをクリア（Ctrl + F5）
4. ファイル名や拡張子が正しいか確認

トラブル3：日本語が文字化けする

症状：

  • 日本語が「???」や「□□□」で表示される

解決方法：

1. HTMLファイルの文字コードを確認
   <meta charset="UTF-8"> が記述されているか
2. ファイルの保存形式をUTF-8にする
3. VSCode の右下に表示される文字コードを「UTF-8」に変更

トラブル4：拡張機能が動かない

症状：

  • インストールした拡張機能が動作しない

解決方法：

1. VSCode を完全に再起動
2. 拡張機能を一度無効にして再度有効にする
3. 拡張機能を再インストール
4. VSCode 自体をアップデート

まとめ

VSCodeは、HTML/CSSを学ぶ・作る・公開するための最強の無料エディタです。

この記事のポイント

基本設定

  • VSCode本体をインストールして日本語化
  • 拡張機能を追加して機能を強化
  • Live Serverでリアルタイムプレビュー

効率化機能

  • Prettierでコードの自動整理
  • Emmetで爆速コーディング
  • Auto Rename Tagでミス防止

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました