VSCode+Web開発入門｜ゼロからはじめるHTML/CSS/JavaScript

このガイドは、プログラミング初心者を対象に、Visual Studio Code (VSCode) を使ったWeb開発の基礎を学ぶための資料です。基本的な環境設定から、HTML/CSS/JavaScriptを組み合わせた実践的なサンプルまで、Web開発に必要な知識を段階的に解説します。

## 目次

1. [VSCodeの基本](#1-vscodeの基本)
2. [HTMLの基礎](#2-htmlの基礎)
3. [CSSの基礎](#3-cssの基礎)
4. [JavaScriptの基礎](#4-javascriptの基礎)
5. [実践：Hello Worldサンプル](#5-実践hello-worldサンプル)
6. [デバッグの基本](#6-デバッグの基本)
7. [参考リンク集](#7-参考リンク集)

---

## 1. VSCodeの基本

### 1.1 VSCodeとは

Visual Studio Code（VSCode）は、Microsoft社が開発した無料のコードエディタです。多機能でありながら軽量で、初心者から上級者まで幅広く使われています。

### 1.2 インストール方法

1. [VSCode公式サイト](https://code.visualstudio.com/)にアクセス
2. お使いのOS（Windows/macOS/Linux）に合わせたダウンロードボタンをクリック
3. ダウンロードしたインストーラーを実行し、指示に従ってインストール

### 1.3 基本的な画面構成

VSCodeの画面は主に以下の要素で構成されています：

- **アクティビティバー**：左端の縦長のアイコン群
  - エクスプローラー（ファイル一覧）
  - 検索
  - ソース管理（Git）
  - デバッグ
  - 拡張機能
  
- **サイドバー**：アクティビティバーで選択した機能の詳細が表示される領域
  - ファイルエクスプローラーではファイル一覧が表示される
  - 拡張機能ではインストール可能な拡張一覧が表示される

- **エディタ**：コードを編集する中央の広い領域
  - 複数のファイルをタブで開ける
  - 分割表示も可能

- **ステータスバー**：下部の情報表示バー
  - カーソル位置、行・列番号
  - エンコーディング情報
  - インデント設定
  - 言語モード
  - Live Serverのボタンなど
  
- **パネル**：エディタの下部に表示できる領域
  - ターミナル
  - 出力
  - 問題（エラーや警告）
  - デバッグコンソール

### 1.4 プロジェクトの作成と管理

1. **フォルダを開く**：`ファイル > フォルダを開く` でプロジェクトフォルダを選択
2. **ファイルの作成**：エクスプローラーで右クリック → `新しいファイル`
3. **ファイルの保存**：`Ctrl+S`（macOSでは`Cmd+S`）

### 1.5 便利な拡張機能

初心者におすすめの拡張機能：

1. **Live Server**：HTMLファイルをブラウザでリアルタイムプレビュー
2. **HTML CSS Support**：HTMLとCSSのコード補完
3. **Auto Rename Tag**：HTMLタグの名前を自動で揃える
4. **Prettier**：コードを自動的に整形
5. **ESLint**：JavaScriptのコード品質チェックとエラー検出
6. **IntelliSense for CSS class names**：CSSクラス名の自動補完
7. **Bracket Pair Colorizer**：括弧のペアを色分けして見やすく表示
8. **Color Highlight**：カラーコードを背景色として表示
9. **Path Intellisense**：ファイルパスの入力補完
10. **Japanese Language Pack**：VS Code の UI を日本語に変更

#### Live Serverのインストール方法

1. 左側のアクティビティバーから拡張機能アイコン（□）をクリック
2. 検索バーに「Live Server」と入力
3. Ritwick Deyが作成したLive Serverを「インストール」

#### Live Serverの使い方

1. HTMLファイルを開く
2. 右下の「Go Live」ボタンをクリック
3. 自動的にブラウザが起動し、ページが表示される
4. コードを編集・保存すると自動的にブラウザが更新される

### 1.6 ショートカットキー

| 操作 | Windows | macOS |
|------|---------|-------|
| 保存 | `Ctrl + S` | `Cmd + S` |
| 全て選択 | `Ctrl + A` | `Cmd + A` |
| コピー | `Ctrl + C` | `Cmd + C` |
| 貼り付け | `Ctrl + V` | `Cmd + V` |
| 元に戻す | `Ctrl + Z` | `Cmd + Z` |
| コードの整形 | `Shift + Alt + F` | `Shift + Option + F` |
| ファイル内検索 | `Ctrl + F` | `Cmd + F` |
| ターミナル表示 | ``Ctrl + ` `` | ``Cmd + ` `` |

---

## 2. HTMLの基礎

### 2.1 HTMLとは

HTML（HyperText Markup Language）は、Webページの**構造**を定義するためのマークアップ言語です。

### 2.2 基本的なHTMLファイルの構造

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>
  <!-- コンテンツはここに記述 -->
  <h1>見出し</h1>
  <p>段落</p>
</body>
</html>
```

> **ヒント**: VSCodeで新規HTMLファイルに「`!`」と入力して`Tab`キーを押すと、上記の基本構造が自動的に挿入されます。

### 2.3 主要なHTMLタグ

```html
<!-- 見出し -->
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

<!-- 段落 -->
<p>これは段落です。</p>

<!-- 強調 -->
<strong>太字</strong>
<em>斜体</em>

<!-- リンク -->
<a href="https://www.example.com">リンクテキスト</a>

<!-- 画像 -->
<img src="画像のパス" alt="代替テキスト">

<!-- リスト -->
<ul> <!-- 順序なしリスト -->
  <li>項目1</li>
  <li>項目2</li>
</ul>

<ol> <!-- 順序ありリスト -->
  <li>最初の項目</li>
  <li>2番目の項目</li>
</ol>

<!-- 区切り -->
<div>ブロックレベル要素</div>
<span>インライン要素</span>

<!-- フォーム要素 -->
<input type="text" placeholder="テキストを入力">
<button>ボタン</button>
```

### 2.4 HTMLの基本ルール

1. タグは `<` と `>` で囲む
2. 多くのタグは開始タグと終了タグのペア (`<p></p>`)
3. 終了タグには `/` が必要
4. タグは入れ子にできる（正しく入れ子にする）
5. 属性は開始タグに記述 (`<a href="...">`）

---

## 3. CSSの基礎

### 3.1 CSSとは

CSS（Cascading Style Sheets）は、HTMLで作成した要素の**見た目**をデザインするための言語です。

### 3.2 CSSの適用方法

#### インラインスタイル（HTML内に直接記述）

```html
<p style="color: blue; font-size: 16px;">青い文字</p>
```

#### 内部スタイルシート（HTMLファイル内のstyleタグ）

```html
<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
```

#### 外部スタイルシート（別ファイル）※最も推奨される方法

styles.css ファイル:
```css
p {
  color: blue;
  font-size: 16px;
}
```

HTMLでの読み込み:
```html
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```

### 3.3 セレクタの基本

```css
/* タグ名でセレクト */
p {
  color: blue;
}

/* クラスでセレクト */
.highlight {
  background-color: yellow;
}

/* IDでセレクト */
#header {
  height: 80px;
}

/* 複数のセレクタ */
h1, h2, h3 {
  font-family: Arial, sans-serif;
}

/* 子孫セレクタ */
nav a {
  text-decoration: none;
}
```

### 3.4 ボックスモデル

すべてのHTML要素は「ボックス」として扱われ、以下の要素で構成されています：

- **content**：内容が表示される領域
- **padding**：内側の余白
- **border**：枠線
- **margin**：外側の余白

```css
div {
  width: 300px;        /* 幅 */
  height: 200px;       /* 高さ */
  padding: 20px;       /* 内側の余白 */
  border: 1px solid black; /* 枠線 */
  margin: 30px;        /* 外側の余白 */
}
```

### 3.5 主要なCSSプロパティ

```css
/* テキスト関連 */
p {
  color: #333;           /* 文字色 */
  font-size: 16px;       /* フォントサイズ */
  font-family: Arial, sans-serif; /* フォント */
  text-align: center;    /* テキストの配置 */
  line-height: 1.5;      /* 行の高さ */
}

/* 背景 */
div {
  background-color: #f0f0f0;  /* 背景色 */
  background-image: url('bg.jpg'); /* 背景画像 */
}

/* レイアウト */
.container {
  display: flex;         /* フレックスボックス */
  justify-content: center; /* 水平方向の配置 */
  align-items: center;     /* 垂直方向の配置 */
}

/* サイズと余白 */
.box {
  width: 50%;           /* 幅（親要素に対する割合） */
  max-width: 500px;     /* 最大幅 */
  height: 200px;        /* 高さ */
  margin: 10px auto;    /* 上下10px、左右自動（中央寄せ） */
  padding: 20px;        /* 内側の余白（四方向同じ） */
}
```

---

## 4. JavaScriptの基礎

### 4.1 JavaScriptとは

JavaScriptは、WebページにインタラクティブIF性（動き）を追加するためのプログラミング言語です。HTML（構造）とCSS（見た目）に対して、JavaScriptは**振る舞い**を担当します。

### 4.2 JavaScriptの適用方法

#### 内部JavaScript（HTMLファイル内のscriptタグ）

```html
<body>
  <!-- HTMLコンテンツ -->
  
  <script>
    // JavaScriptコード
    console.log("Hello, World!");
  </script>
</body>
```

#### 外部JavaScript（別ファイル）※推奨される方法

script.js ファイル:
```javascript
console.log("Hello, World!");
```

HTMLでの読み込み:
```html
<body>
  <!-- HTMLコンテンツ -->
  
  <script src="script.js"></script>
</body>
```

> **ポイント**: `<script>`タグは通常、`</body>`タグの直前に配置します。これにより、ページの読み込みパフォーマンスが向上します。

### 4.3 基本的な構文

#### 変数宣言

```javascript
// 変数（再代入可能）
let name = "田中";
name = "鈴木"; // 再代入OK

// 定数（再代入不可）
const PI = 3.14;
// PI = 3.15; // エラー！
```

#### データ型

```javascript
// 文字列
let greeting = "こんにちは";

// 数値
let age = 20;
let height = 170.5;

// 真偽値
let isStudent = true;

// 配列
let colors = ["赤", "青", "緑"];
console.log(colors[0]); // "赤"

// オブジェクト
let person = {
  name: "山田",
  age: 20,
  isStudent: true
};
console.log(person.name); // "山田"
```

#### 条件分岐

```javascript
let age = 18;

if (age >= 20) {
  console.log("成人です");
} else if (age >= 18) {
  console.log("18歳以上です");
} else {
  console.log("未成年です");
}
```

#### ループ

```javascript
// for ループ
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// 配列のループ
const fruits = ["りんご", "バナナ", "オレンジ"];
for (const fruit of fruits) {
  console.log(fruit);
}
```

#### 関数

```javascript
// 関数宣言
function greet(name) {
  return "こんにちは、" + name + "さん";
}

// 関数呼び出し
console.log(greet("太郎")); // "こんにちは、太郎さん"

// アロー関数（ES6）
const greet2 = (name) => {
  return `こんにちは、${name}さん`; // テンプレートリテラル
};
```

### 4.4 DOM操作の基本

DOM（Document Object Model）を使ってHTML要素を操作します。

#### 要素の取得

```javascript
// IDによる取得
const header = document.getElementById("header");

// クラスによる取得（複数）
const items = document.getElementsByClassName("item");

// タグ名による取得（複数）
const paragraphs = document.getElementsByTagName("p");

// CSSセレクタによる取得（単一）
const container = document.querySelector(".container");

// CSSセレクタによる取得（複数）
const buttons = document.querySelectorAll("button");
```

#### 要素の操作

```javascript
// テキスト内容の変更
element.textContent = "新しいテキスト";

// HTML内容の変更
element.innerHTML = "<span>新しいHTML</span>";

// クラスの追加と削除
element.classList.add("active");
element.classList.remove("hidden");

// スタイルの変更
element.style.color = "red";
element.style.fontSize = "16px";
```

#### イベント処理

```javascript
const button = document.getElementById("myButton");

// イベントリスナーの追加
button.addEventListener("click", function() {
  console.log("ボタンがクリックされました");
  alert("こんにちは！");
});
```

---

## 5. 実践：Hello Worldサンプル

実際にHTML、CSS、JavaScriptを組み合わせたサンプルを作成しましょう。

### 5.1 基本的なHello Worldページ

#### 方法1: ファイルを分割する方法

以下の3つのファイルを作成します：

##### index.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World サンプル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Hello World サンプル</h1>
    
    <div id="message">
      これはHTML, CSS, JavaScriptを組み合わせた簡単なサンプルです
    </div>
    
    <button id="greetBtn">挨拶する</button>
    <button id="changeColorBtn">色を変える</button>
    
    <div id="result">
      <!-- 結果がここに表示されます -->
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
```

##### styles.css
```css
/* ページ全体のスタイル */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  text-align: center;
  margin: 0;
  padding: 20px;
}

/* コンテナのスタイル */
.container {
  max-width: 600px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 見出しのスタイル */
h1 {
  color: #333;
  margin-bottom: 20px;
}

/* メッセージのスタイル */
#message {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}

/* ボタンのスタイル */
button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

/* 結果表示エリアのスタイル */
#result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  min-height: 20px;
}

/* 強調表示 */
.highlight {
  color: #ff6600;
  font-weight: bold;
}
```

##### script.js
```javascript
// DOMが読み込まれた後に実行
document.addEventListener('DOMContentLoaded', function() {
  // console.logでデバッグメッセージを出力
  console.log('ページが読み込まれました！');
  
  // HTML要素を取得
  const greetBtn = document.getElementById('greetBtn');
  const changeColorBtn = document.getElementById('changeColorBtn');
  const resultElement = document.getElementById('result');
  const messageElement = document.getElementById('message');
  
  // 要素が取得できたかコンソールで確認
  console.log('挨拶ボタン:', greetBtn);
  console.log('色変更ボタン:', changeColorBtn);
  console.log('結果表示領域:', resultElement);
  
  // 挨拶ボタンのクリックイベント
  greetBtn.addEventListener('click', function() {
    console.log('挨拶ボタンがクリックされました');
    
    // 現在の時間を取得
    const currentHour = new Date().getHours();
    let greeting;
    
    // 時間帯に応じて挨拶を変える
    if (currentHour < 12) {
      greeting = 'おはようございます！';
    } else if (currentHour < 18) {
      greeting = 'こんにちは！';
    } else {
      greeting = 'こんばんは！';
    }
    
    // デバッグ情報をコンソールに出力
    console.log('現在の時間:', currentHour, '時');
    console.log('選択された挨拶:', greeting);
    
    // 結果を表示
    resultElement.innerHTML = '時間: ' + currentHour + '時<br>' +
                             '<span class="highlight">' + greeting + '</span>';
  });
  
  // 色変更ボタンのクリックイベント
  changeColorBtn.addEventListener('click', function() {
    console.log('色変更ボタンがクリックされました');
    
    // ランダムな色を生成
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFBE0B', '#7B68EE'];
    const randomIndex = Math.floor(Math.random() * colors.length);
    const selectedColor = colors[randomIndex];
    
    // デバッグ情報をコンソールに出力
    console.log('利用可能な色:', colors);
    console.log('選択されたインデックス:', randomIndex);
    console.log('選択された色:', selectedColor);
    
    // メッセージの色を変更
    messageElement.style.color = selectedColor;
    
    // 結果を表示
    resultElement.innerHTML = '色を変更しました:<br>' +
                             '選択された色: <span style="color:' + 
                             selectedColor + '">' + selectedColor + '</span>';
  });
});
```

#### 方法2: 1つのHTMLファイルにすべてを統合する方法

HTMLファイル内にCSS（`<style>`タグ内）とJavaScript（`<script>`タグ内）を含める方法です。

##### integrated.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML/JavaScript統合サンプル</title>
  <!-- 内部CSSスタイル -->
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
      text-align: center;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    #message {
      font-size: 18px;
      color: #666;
      margin-bottom: 30px;
    }
    
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      margin: 0 5px;
      transition: background-color 0.3s;
    }
    
    button:hover {
      background-color: #45a049;
    }
    
    #result {
      margin-top: 20px;
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 5px;
      min-height: 20px;
    }
    
    .highlight {
      color: #ff6600;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>HTML/JavaScript統合サンプル</h1>
    
    <div id="message">
      これはHTML, CSS, JavaScriptを組み合わせた簡単なサンプルです
    </div>
    
    <button id="greetBtn">挨拶する</button>
    <button id="timeBtn">現在時刻を表示</button>
    <button id="colorBtn">色を変える</button>
    
    <div id="result">
      <!-- 結果がここに表示されます -->
    </div>
  </div>
  
  <!-- JavaScriptコード -->
  <script>
    // DOMが読み込まれた後に実行
    document.addEventListener('DOMContentLoaded', function() {
      // console.logでデバッグメッセージを出力
      console.log('ページが読み込まれました！');
      
      // HTML要素を取得
      const greetBtn = document.getElementById('greetBtn');
      const timeBtn = document.getElementById('timeBtn');
      const colorBtn = document.getElementById('colorBtn');
      const resultElement = document.getElementById('result');
      const messageElement = document.getElementById('message');
      
      // 要素が取得できたかコンソールで確認
      console.log('挨拶ボタン:', greetBtn);
      console.log('時刻ボタン:', timeBtn);
      console.log('色変更ボタン:', colorBtn);
      console.log('結果表示領域:', resultElement);
      
      // 挨拶ボタンのクリックイベント
      greetBtn.addEventListener('click', function() {
        console.log('挨拶ボタンがクリックされました');
        
        // 現在の時間を取得
        const currentHour = new Date().getHours();
        let greeting;
        
        // 時間帯に応じて挨拶を変える
        if (currentHour < 12) {
          greeting = 'おはようございます！';
        } else if (currentHour < 18) {
          greeting = 'こんにちは！';
        } else {
          greeting = 'こんばんは！';
        }
        
        // デバッグ情報をコンソールに出力
        console.log('現在の時間:', currentHour, '時');
        console.log('選択された挨拶:', greeting);
        
        // 結果を表示
        resultElement.innerHTML = '時間: ' + currentHour + '時<br>' +
                               '<span class="highlight">' + greeting + '</span>';
      });
      
      // 時刻ボタンのクリックイベント
      timeBtn.addEventListener('click', function() {
        console.log('時刻ボタンがクリックされました');
        
        // 現在の日時を取得
        const now = new Date();
        const dateTimeStr = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
        
        // 結果を表示
        resultElement.textContent = "現在の日時: " + dateTimeStr;
      });
      
      // 色変更ボタンのクリックイベント
      colorBtn.addEventListener('click', function() {
        console.log('色変更ボタンがクリックされました');
        
        // ランダムな色を生成
        const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFBE0B', '#7B68EE'];
        const randomIndex = Math.floor(Math.random() * colors.length);
        const selectedColor = colors[randomIndex];
        
        // デバッグ情報をコンソールに出力
        console.log('選択された色:', selectedColor);
        
        // メッセージの色を変更
        messageElement.style.color = selectedColor;
        
        // 結果を表示
        resultElement.innerHTML = '色を変更しました:<br>' +
                               '選択された色: <span style="color:' + 
                               selectedColor + '">' + selectedColor + '</span>';
      });
    });
  </script>
</body>
</html>
```

### 5.2 サンプルの実行方法

1. VSCodeで3つのファイル（index.html, styles.css, script.js）を作成します
2. ファイルは同じフォルダに保存します
3. index.htmlを開いた状態で、Live Serverを起動します（右下の「Go Live」ボタン）
4. ブラウザが自動的に開き、サンプルページが表示されます
5. 「挨拶する」ボタンと「色を変える」ボタンをクリックして動作を確認します

---

## 6. デバッグの基本

### 6.1 console.logの使い方

JavaScriptのデバッグで最も基本的なのは`console.log()`を使うことです。

```javascript
// 変数の値を確認
let name = "太郎";
console.log(name); // "太郎"

// オブジェクトの内容を確認
let person = { name: "太郎", age: 20 };
console.log(person); // {name: "太郎", age: 20}

// 複数の値を一度に確認
console.log("デバッグ:", name, person, 42);
```

### 6.2 ブラウザの開発者ツール

#### 開発者ツールの開き方

1. Chrome/Edge: F12キーまたは右クリック→「検証」
2. Firefox: F12キーまたは右クリック→「要素を調査」

#### コンソールタブの使い方

1. 上部のタブから「Console」（コンソール）を選択
2. JavaScriptエラーや`console.log`の出力が表示される
3. コンソール下部に直接JavaScriptコードを入力して実行できる

### 6.3 エラーメッセージの読み方

JavaScriptエラーの例：
```
Uncaught TypeError: Cannot read property 'value' of null
    at HTMLButtonElement.<anonymous> (script.js:15)
```

この例は以下を意味します：
- エラーの種類：`TypeError`（型エラー）
- エラーの内容：`null`オブジェクトの`value`プロパティを読み取ろうとした
- エラーが発生した場所：`script.js`の15行目

### 6.4 デバッグのコツ

1. **段階的に確認する**：問題が発生している箇所の前後に`console.log`を配置する
2. **一時変数を使う**：複雑な式を分解して、中間結果を確認する
3. **エラーメッセージを注意深く読む**：行番号とエラーの種類に注目する
4. **条件分岐の確認**：`if`文の条件が期待通りに評価されているか確認する

```javascript
// デバッグの例
function calculateTotal(price, quantity) {
  console.log("関数が呼び出されました");
  console.log("引数:", price, quantity);
  
  // 値が正しいか確認
  if (typeof price !== 'number' || typeof quantity !== 'number') {
    console.error("引数が数値ではありません");
    return 0;
  }
  
  const subtotal = price * quantity;
  console.log("小計:", subtotal);
  
  const tax = subtotal * 0.1;
  console.log("消費税:", tax);
  
  const total = subtotal + tax;
  console.log("合計:", total);
  
  return total;
}
```

---

## 7. 参考リンク集

### 公式ドキュメント
- [Visual Studio Code 公式サイト](https://code.visualstudio.com/)
- [HTML リファレンス - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/HTML)
- [CSS リファレンス - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/CSS)
- [JavaScript リファレンス - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript)

### チュートリアルサイト
- [MDN Web Docs - HTML入門](https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML)
- [MDN Web Docs - CSS入門](https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps)
- [MDN Web Docs - JavaScript入門](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps)

### 学習リソース
- [W3Schools](https://www.w3schools.com/) - HTML/CSS/JavaScriptのチュートリアル
- [freeCodeCamp](https://www.freecodecamp.org/) - 無料で学べるWebデベロップメントコース
- [Progate](https://prog-8.com/) - 日本語でプログラミングを学べるサイト

### 便利なツール
- [CodePen](https://codepen.io/) - HTML/CSS/JavaScriptのコードを書いて即座に実行・共有できるサービス
- [JSFiddle](https://jsfiddle.net/) - Web開発のためのオンラインエディタ
- [Can I use...](https://caniuse.com/) - ブラウザ対応状況を確認できるサイト

---

## まとめ

この資料を通じて、VSCodeの基本的な使い方から、HTML/CSS/JavaScriptの基礎、そして実際のWebページ作成まで学びました。Web開発の最初の一歩として、以下のことを意識しながら練習を続けてください：

1. **小さく始める**：シンプルなページから始めて、徐々に機能を追加していく
2. **実践的に学ぶ**：概念を学んだら、すぐに実際にコードを書いて試す
3. **エラーから学ぶ**：エラーが発生したら、恐れずにデバッグし、原因を理解する
4. **リソースを活用する**：分からないことがあれば、ドキュメントやチュートリアルを参照する

Web開発の世界は非常に広く、常に新しい技術や手法が登場しています。この資料で学んだ基礎を土台にして、さらに知識を深めていってください。

**Happy Coding!**