【HTML/CSS】ローカルでHTMLとCSSの開発環境を構築する方法

Web制作の第一歩となるHTML/CSSの環境構築を解説します。必須ツールであるブラウザやエディタ（VSCode）の導入方法から、開発効率を上げる拡張機能の紹介、そして実践的なフォルダ構成の作り方までを学び、「Hello World!」をブラウザに表示させることを目指します。

作成日: 2025年12月21日更新日: 2025年12月21日

必要なツール一覧

まず、HTML/CSSの開発に必要なツールを揃えましょう。以下の表は、今回の学習で推奨するツールとそのカテゴリをまとめたものです。

カテゴリ	推奨ツール
ブラウザ	Google Chrome
エディタ	Visual Studio Code（VSCode）
拡張機能	Live Server / Japanese Language Pack
その他	フォルダ構成 / ファイル管理

それぞれのツールについて、以下で詳しく説明します。

ブラウザ

Google Chrome（推奨）

Webページを作成する言語であるHTMLとCSSが、設計通りに正しく表示されるかを確認するために使用します。開発中のWebページを確認するための最も基本的なツールです。
キーボードのF12キーを押すことで「開発者ツール」を起動できます。このツールは、プログラムが意図通りに動かない原因（バグ）を発見して修正する作業（デバッグ）を行う際に非常に役立ちます。
世界で最も多くの人が利用しているブラウザであるため、Web開発の基準として使われます。まずChromeで正常に動作することを確認し、その後に他のブラウザでの確認を行うことで、効率的に開発を進めることが可能です。

エディタ

エディタとは、プログラムのコードを書くための専用のソフトウェアです。メモ帳のように文字を入力できますが、プログラミングを効率的に行うための便利な機能が数多く搭載されています。

Visual Studio Code（推奨）

数あるエディタの中でも、特にVisual Studio Code（ビジュアル・スタジオ・コード）をおすすめします。

無料・軽量・高機能
- 料金を支払うことなく利用できます。
- パソコンの動作をあまり重くせずに、快適に操作できます。
- プログラミングに役立つ多くの機能が標準で備わっています。
初心者からプロまで広く使用
- 多くのエンジニアが利用しているため、使い方に関する情報がインターネット上に豊富にあります。
- 操作で困ったことがあっても、検索すれば解決策を見つけやすいです。
コード補完・ハイライトが便利
- コード補完: コードを途中まで入力すると、残りの候補を自動で表示してくれます。これにより、入力の手間を省き、タイプミスを防ぐことができます。
- ハイライト: コードの種類に応じて文字を色分けして表示してくれます。これにより、コードの構造が視覚的に分かりやすくなり、間違いに気づきやすくなります。

拡張機能

Visual Studio Codeは「拡張機能」を追加することで、より便利にカスタマイズできます。ここでは、Web開発を始める際におすすめの拡張機能をいくつか紹介します。

Japanese Language Pack for Visual Studio Code

Visual Studio Codeは、初期状態ではメニューやコマンドの表示がすべて英語です。この拡張機能をインストールすると、これらの表示を日本語にすることができます。プログラミング初心者の方でも直感的に操作しやすくなるため、最初に入れておくことをおすすめします。

Live Server

HTMLやCSSのコードを修正した際、その変更をブラウザで確認するためには、通常ファイルを保存した後に手動でブラウザを更新する必要があります。この拡張機能を使うと、ファイルを保存するだけで自動的にブラウザの表示が更新されるようになります。修正結果をリアルタイムで確認できるため、開発効率が格段に向上します。
HTMLファイルを開いた状態で、エディタ右下の「Go Live」ボタンをクリックするだけで簡単に利用を開始できます。

Live Preview（任意）

この拡張機能は、作成中のHTMLのプレビューをWebブラウザではなく、VS Codeのエディタ内に直接表示するものです。画面を切り替える手間なく、コードを書きながら隣で表示を確認できます。Live Serverと似た機能を持つため、ご自身の開発スタイルに合わせて導入を検討してください。

ワークスペース（フォルダ構成）

Webサイトやアプリケーションを開発する際、関連するファイルを整理して保存する場所をワークスペースと呼びます。ファイルを適切にフォルダ分けすることで、プロジェクトの構造が分かりやすくなり、管理がしやすくなります。このフォルダの構造をフォルダ構成と呼びます。


1my-project/
2├── index.html
3└── assets/
4    └── css/
5        └── style.css

上記の例は、Webサイト制作でよく使われる基本的なフォルダ構成です。それぞれの役割は以下の通りです。

my-project/ このプロジェクト全体のファイルを格納する、大元のフォルダです。一般的にプロジェクト名が付けられます。
index.html WebサイトのトップページとなるHTMLファイルです。通常、このファイルが最初にブラウザで表示されます。
assets/ 画像やCSSファイルなど、HTMLファイル以外の補助的なファイルを格納するためのフォルダです。「asset」は「資源」を意味します。
css/ assetsフォルダの中にあり、Webページの見た目（デザイン）を定義するCSSファイルを格納するための専用フォルダです。
style.css cssフォルダの中に配置された、具体的なデザインの指示を記述するCSSファイルです。

HellowWorldを表示させてみよう

Webページに「Hello World!」という文字を表示させるための基本的なコードです。まず、Webページの構造を定義するHTMLファイルを作成します。

my-project/index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Hello World</title>
6  <link rel="stylesheet" href="assets/css/style.css">
7</head>
8<body>
9  <h1>Hello World!</h1>
10</body>
11</html>

このHTMLファイルでは、<head>タグの中でページの基本設定を行っています。meta charset="UTF-8"は文字化けを防ぐための設定です。<link>タグでは、後述するCSSファイルを読み込み、ページの見た目を整える準備をしています。

実際にブラウザに表示される内容は<body>タグの中に記述します。ここでは<h1>という見出しタグを使い、「Hello World!」というテキストを表示させています。

次に、ページの見た目を装飾するCSSファイルです。

my-project/assets/css/style.css
1body {
2  text-align: center;
3  padding: 50px;
4  font-family: sans-serif;
5  background-color: #f0f0f0;
6}

このコードは、bodyタグ、つまりページ全体に対してスタイルを適用する設定です。テキストを中央に配置し、背景色を薄い灰色にしています。

最後に、作成したファイルをブラウザで表示させる手順です。ここでは、VS Code（Visual Studio Code）というエディタと、その拡張機能である「Live Server」を使用することを想定しています。

VS Codeでindex.htmlを開く
右下の「Go Live」をクリック
ブラウザで「Hello World!」が表示されたら成功！

おわりに

この記事では、Web制作に不可欠な開発環境の構築方法を学びました。ブラウザ（Google Chrome）やエディタ（VSCode）を準備し、Live Serverのような拡張機能で開発を効率化する準備が整いました。また、ファイルを整理するためのフォルダ構成を学び、実際に「Hello World!」をブラウザに表示させることができました。この環境が、あなたのWeb制作学習における素晴らしいスタート地点となります。