ホーム›初心者向けweb講座›VS Codeの導入と基本操作ガイド｜拡張機能からHTML/CSS演習まで
初心者向けweb講座

VS Codeの導入と基本操作ガイド｜拡張機能からHTML/CSS演習まで

更新日：2026-05-04 著者：unigram 読了目安：10分

この記事の要点

Web制作の現場標準エディタ「VS Code」の導入手順から、日本語化・おすすめ拡張機能・基本操作、HTML/CSSレイアウト演習コードまでをまとめて解説します。

Web制作において、コードを書くツール選びはとても重要です。ここでは業界標準エディタである Visual Studio Code（VS Code） の導入から、便利な拡張機能の設定、基本操作、そして実際のHTML/CSS演習までを順を追って解説します。

エディタの種類と選び方

Web制作に使えるテキストエディタ・ソフトはいくつかあります。それぞれの特徴を把握して、用途に合ったものを選びましょう。

エディタ名 特徴 料金
Visual Studio Code（VS Code） 拡張機能が豊富、Windows/Mac対応。デファクトスタンダード。 無料
Cursor AIがコードを自動生成・修正してくれるVS Codeベースの高性能エディタ。 無料〜有料
Sublime Text 動作が非常に高速で軽量。 無料〜有料
Adobe Dreamweaver コーディングとライブビューを同時確認できる。プロ向け。 有料
Brackets ライブプレビュー機能に特化したWebデザイナー向けエディタ。 無料
Notepad++ Windows向けの軽量エディタ。 無料

この中で最もおすすめなのが VS Code です。無料でありながら拡張機能が豊富で、Web制作の現場でも広く使われています。以降はVS Codeを前提に解説します。

VS Codeのインストール

https://code.visualstudio.com/ にアクセスし、お使いのOSに合ったインストーラーをダウンロードしてください。

インストール手順はOSや時期によって異なる場合があります。「VS Code インストール」などで検索すると、最新の手順を確認できます。

VS Codeの拡張機能

日本語化の手順

初期状態では全て英語表記です。以下の手順で日本語化できます。

  1. VS Codeを起動し、左側のアクティビティバーにある拡張機能アイコン（四角が4つ並んだアイコン）をクリックします。
  2. 検索ボックスに japanese と入力します。
  3. 「Japanese Language Pack for Visual Studio Code」が表示されたら「Install」ボタンをクリックします。
  4. インストール後、右下に再起動を促す通知が表示されます。「Change Language and Restart」をクリックすると日本語表示で再起動されます。

おすすめの拡張機能

VS Codeは標準機能でもHTML/CSSの編集に対応していますが、以下の拡張機能を導入することでフロントエンド開発がより快適になります。

拡張機能名 機能
Prettier – Code formatter HTML・CSS・JavaScriptなどのコードを統一されたルールで自動整形します。
Auto Rename Tag HTMLの開始タグを変更すると、対応する終了タグも自動で変更されます。
Path Intellisense ファイルパス（画像パス・リンクパスなど）入力時に強力な自動補完を提供します。
Project Manager 複数のサイト・プロジェクトを効率的に管理できます。
open in browser 編集中のHTMLファイルをブラウザで素早く確認できます。

まずは標準機能で使い始め、必要に応じて拡張機能を追加していくのがおすすめです。

VS Codeの基本操作

プロジェクト（サイト）の開き方

VS Codeでは、サイト全体を「フォルダ」として開き、「ワークスペース」として管理することで、ファイルの一括操作が可能になります。

  1. 「ファイル」メニューから「フォルダを開く」を選択します。
  2. 開発したいウェブサイトのルートフォルダ（HTMLやCSSファイルが入っている親フォルダ）を選択します。
  3. 開いたフォルダ内のファイルは、サイドバーのエクスプローラーから作成・削除・名前変更などが自由に行えます。

VS Codeの主な機能

機能名 概要
IntelliSense（インテリセンス） 入力中の文字から予測されるキーワードや関数をリスト表示し、自動で補完してくれます。タイピングの手間を減らしミスを防ぎます。
シンタックスハイライト HTMLのタグ、CSSのプロパティ、コメントなどを色分けして表示します。コードの構造が一目で分かりやすくなります。
Emmet（エメット） HTMLやCSSを短い略語で記述するだけで、複雑なコードを一気に展開できます。
検索・置き換え機能 プロジェクトフォルダ内の全ファイルまたは単一ファイルを対象に、特定の文字列を検索したり一括で置き換えたりできます。
ワークスペース プロジェクトフォルダを効率的に管理できます。複数のフォルダをひとつのワークスペースにまとめることも可能です。

演習：VS CodeでCSSレイアウトを作成する

ここでは、VS CodeのHTML/CSS入力補完機能を体験しながら、簡単なWebページのレイアウトを作成します。index.html・style.css・test.jpg を同じフォルダ内に置き、ブラウザで確認しながら進めましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" media="all" type="text/css" href="style.css" />
  <title>基本要素の組み合わせ練習｜株式会社Hello World</title>
</head>
<body>
  <div id="container">
    <header>
      <h1 class="logo">株式会社Hello World</h1>
      <nav>
        <ul>
          <li><a href="#service">サービス概要</a></li>
          <li><a href="#plan">プラン一覧</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div id="service" class="content-section">
        <h2 class="section-title">サービス概要</h2>
        <div class="hero-image">
          <img src="test.jpg" alt="学習用のパソコンイメージ" width="1000" height="400">
        </div>
        <p class="lead-text">
          HTMLは<strong>タグという部品</strong>を組み合わせて構築します。<br>
          テキストをそのまま書いても、意図した通りの改行や構造にはなりません。
        </p>
        <div class="sub-content">
          <h3 class="sub-title">主な学習内容</h3>
          <p class="lead-text lead-text-small">
            テキストは<span class="highlight">タグという部品</span>を組み合わせて構築します。<br>
            テキストをそのまま書いても、<b>意図した通りの改行や構造</b>にはなりません。
          </p>
          <ul class="check-list">
            <li>基本タグの役割理解</li>
            <li>正しい親子関係での構築</li>
            <li>情報のグループ化</li>
          </ul>
        </div>
      </div>
      <div id="plan" class="content-section">
        <h2 class="section-title">プラン一覧</h2>
        <table class="data-table">
          <thead>
            <tr>
              <th>コース名</th>
              <th>期間</th>
              <th>費用</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>初級コース</td>
              <td>1ヶ月</td>
              <td>¥10,000</td>
            </tr>
            <tr>
              <td>中級コース</td>
              <td>3ヶ月</td>
              <td>¥30,000</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <footer class="page-footer">
      <p class="copyright">&copy; 株式会社Hello World Web学習用サンプル</p>
    </footer>
  </div>
</body>
</html>

style.css

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.8;
  color: #333;
  background-color: #f9f9f9;
}

/* コンテナ：1000px 中央揃え */
#container {
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* ヘッダー */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
  border-bottom: 2px solid #eee;
}

h1.logo {
  font-size: 30px;
  color: #007bff;
}

header nav ul {
  display: flex;
  list-style: none;
}

header nav ul li {
  margin-left: 25px;
}

header nav ul li a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
  transition: color 0.3s;
}

header nav ul li a:hover {
  color: #007bff;
}

/* メインコンテンツ */
.content-section {
  padding: 60px 40px;
}

.section-title {
  font-size: 25px;
  margin-bottom: 30px;
  padding-left: 15px;
  border-left: 5px solid #007bff;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 25px;
}

.lead-text {
  font-size: 20px;
  margin-bottom: 40px;
}

.lead-text-small {
  font-size: 15px;
}

.highlight {
  background: linear-gradient(transparent 70%, #fff9c4 70%);
  font-weight: bold;
}

.sub-title {
  margin-bottom: 15px;
  color: #444;
}

.check-list {
  margin: 20px 0 20px 20px;
}

/* テーブル */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.data-table th,
.data-table td {
  padding: 15px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.data-table th {
  background-color: #f2f7ff;
  color: #007bff;
}

/* フッター */
.page-footer {
  text-align: center;
  padding: 40px;
  background-color: #444;
  color: #fff;
}

.copyright {
  font-size: 12px;
}

まとめ

VS Codeは無料でありながら、Web制作に必要な機能がそろった強力なエディタです。ポイントを整理しておきましょう。

  • インストールは公式サイト（code.visualstudio.com）からワンクリックで完了します。
  • 日本語化は拡張機能「Japanese Language Pack」で即座に対応できます。
  • Prettier・Auto Rename Tag・Path Intellisense などの拡張機能を導入することで、コーディング効率が大幅に上がります。
  • プロジェクトはフォルダ単位で開いてワークスペースとして管理するのが基本です。
  • IntelliSense・Emmet・シンタックスハイライトなどの標準機能を活用するだけで、コーディングのスピードとミスが改善されます。

まずは演習で紹介したHTMLとCSSをVS Codeで入力し、ブラウザで表示を確認しながら、エディタの操作感に慣れていきましょう。

#Web基礎知識

この記事を書いた人

unigram
web、印刷、映像などの制作をしています。@京都、フリーランス18年目。 大学で講師もしています。 自身の備忘録も兼ねて、Web制作・WordPress・SEO・GA4・生成AI活用をテーマに情報発信しています。わかりやすく優しい内容で記事作成を心がけています。

関連記事

あわせて読みたい記事