HTML 開発環境の構築

JPKODA 編集部 May 9, 2026

HTMLの開発環境とは、本質的に「コードを書き、保存し、確認する」ための一連のツールセットです。これらの基礎的なツールを正しく設定しなければ、HTMLの理論知識を実践に活かすことは困難です。

本章では、HTML開発における2つの主要コンポーネントである、コードを記述するためのテキストエディタ（Text Editor）と、結果を確認するためのウェブブラウザ（Web Browser）の選択およびインストール方法について解説します。

初期段階でこれらを完璧に整えることで、学習体験をスムーズにし、すぐにHTMLコードのテストや実験に取り組めるようになります。

1. HTML 開発環境

HTML開発において、主要なコンポーネントは以下の2つです。

テキストエディタ (Text Editor): すべてのHTMLコードを記述する場所です。技術的には、Windowsの「メモ帳」やmacOSの「テキストエディット」のような標準アプリでも動作しますが、プロフェッショナルなコードエディタを使用することで効率が劇的に向上し、ミスも防げます。これらには、コードを色分けして視認性を高めるシンタックスハイライト（Syntax Highlighting）や自動補完（Autocompletion）など、多くの便利な機能が備わっています。
ウェブブラウザ (Web Browser): 記述したHTMLコードがどのように表示されるかを確認するために必要です。ブラウザ（Chrome, Firefox, Edge, Safariなど）はHTMLファイルを読み取ってレンダリング（Rendering）し、コードを私たちが画面で目にするウェブページへと変換します。これが、世界中の人々がオンラインでサイトを閲覧する仕組みです。

これら2つのツールの組み合わせによって、完全な開発サイクルが形成されます。エディタでコードを書き、ファイルを保存し、ブラウザでそのファイルを開いて結果を確認する、という流れです。

2. 必須ツール：テキストエディタとウェブブラウザ

2.1 テキストエディタの選択とインストール

数多くの優れたエディタが存在しますが、私たちは Visual Studio Code (VS Code) を強く推奨します。

VS CodeはMicrosoftが開発した無料かつオープンソースの非常に人気のあるエディタで、あらゆるプログラミング言語のプロフェッショナルに広く利用されています。豊富な機能、巨大な拡張機能（Extensions）のエコシステム、そして継続的なアップデートにより、初心者からエキスパートまで最適な選択肢となっています。

2.2 なぜ VS Code なのか？

シンタックスハイライト (Syntax Highlighting): HTMLのタグ、属性、テキストなどを自動で色分けし、読みやすく理解しやすい状態にします。
インテリセンス (IntelliSense/Autocompletion): 入力中にHTMLタグや属性を提案し、開発スピードを上げるとともにタイポ（打ち間違い）を減らします。
統合ターミナル (Integrated Terminal): エディタ内で直接コマンドを実行できます（将来的に役立つ高度な機能です）。
拡張機能 (Extensions): 膨大なマーケットプレイスがあり、新しい機能の追加や他の言語のサポート、ツールとの連携が可能です。
クロスプラットフォーム (Cross-Platform): Windows, macOS, Linux すべてに対応しています。

2.3 VS Code のインストール手順

VS Code をダウンロード: ブラウザで公式サイト（ https://code.visualstudio.com/ ）にアクセスします。
OS を選択: サイトがOSを自動検出し、適切なインストーラーを提案します。「Download for [あなたのOS]」ボタンをクリックしてください。
インストーラーを実行:

Windows: ダウンロードした .exe ファイルをダブルクリックして開始します。使用許諾に同意し、デフォルト設定で進めます。「エクスプローラーのファイルコンテキストメニューに『Code で開く』アクションを追加する」という項目には必ずチェックを入れてください。これにより、右クリックから直接VS Codeでファイルを開けるようになり、非常に便利です。
macOS: ダウンロードした .zip ファイルを解凍し、中にある「Visual Studio Code」を「アプリケーション（Applications）」フォルダにドラッグ＆ドロップします。
Linux: ディストリビューションに応じて .deb (Debian/Ubuntu) または .rpm (Fedora/RHEL) をダウンロードし、パッケージマネージャーからインストールします。

VS Code を起動: インストール後、メニューやショートカットから起動します。
日本語化設定: VS Codeを日本語表示にするには、左側のサイドバーにある拡張機能（Extensions）アイコンをクリック（または Ctrl+Shift+X）し、検索窓に「Japanese」と入力します。Microsoft公式の「Japanese Language Pack for Visual Studio Code」をインストールし、右下に表示される「Restart」ボタンを押して再起動すれば日本語化は完了です。

3. ウェブブラウザの選択と検証

現代のブラウザは、HTMLページを確認するために不可欠なツールです。

3.1 推奨ブラウザ

Google Chrome: 非常にシェアが高く、強力なデベロッパーツール（Developer Tools）を備えており、最新のウェブ標準への対応も優れています。
Mozilla Firefox: プライバシー重視で、開発者向け機能も非常に充実しています。
Microsoft Edge: Chromeと同じChromiumエンジンを搭載しており、同様のパフォーマンスとツールを提供します。
Apple Safari: Appleデバイスの標準ブラウザです。Appleユーザー向けの最適化を確認する際に重要です。

本コースでは、上記のモダンブラウザであればどれでも問題なく動作します。もしインストールしていない場合は、Google Chrome または Mozilla Firefox の導入をお勧めします。

3.2 インストール手順（必要な場合）

Google Chrome: https://www.google.com/chrome/ にアクセスして「Chrome をダウンロード」をクリック。
Mozilla Firefox: https://www.mozilla.org/firefox/new/ にアクセスして「Firefox をダウンロード」をクリック。

3.3 ブラウザの動作確認

ブラウザが正しく動作し、ローカルファイルを開く方法に慣れるため、以下のステップを実行してください。

新しいフォルダを作成: デスクトップなどに html-basics というフォルダを作成します。ここが学習用のワークスペース（Workspace）になります。
簡単なテキストファイルを作成:

VS Codeを開き、「ファイル」>「新規テキストファイル」を選択します（Ctrl+N / Cmd+N）。
「こんにちは、jpkoda.com」（Hello, jpkoda.com）と入力します（まだタグを気にする必要はありません）。
「ファイル」>「名前を付けて保存」（Ctrl+S / Cmd+S）をクリックします。
作成した html-basics フォルダを選択し、ファイル名を first-page.html に設定して保存します。拡張子の .html は必須です！

ブラウザで開く:

ファイルエクスプローラー（Windows）やFinder（Mac）で html-basics フォルダを開きます。
first-page.html を右クリックし、「プログラムから開く」を選択して、お好みのブラウザ（ChromeやFirefoxなど）を選びます。
ブラウザが起動し、「こんにちは、jpkoda.com」と表示されれば成功です。アドレスバーが file:/// で始まっていることは、それが自分のPC内にあるローカルファイルであることを示しています。

4. 推奨 VS Code 拡張機能

HTML/CSS開発を効率化するために、以下の拡張機能を導入することを強くお勧めします。

Live Server (Ritwick Dey): プロジェクトの変更をリアルタイムでブラウザに反映させます。ファイルを保存するだけで自動的にブラウザがリロードされます。
Auto Close Tag (Jun Han): HTMLの開始タグを書くと、対応する終了タグを自動的に補完します。
Auto Rename Tag (Jun Han): 開始タグの名前を変更すると、ペアになっている終了タグも自動的に同期して変更されます。
Prettier - Code formatter (Prettier): コードのスタイルを統一します。保存時にHTML/CSS/JSコードを綺麗に整形してくれます。