この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: 環境構築
SEOタイトル: HTML 開発環境構築完全ガイド（VS Code・Live Server・Emmet・Vite）

この記事の要点
  • テキストエディタは VS Code 推奨: 拡張機能・Git 連携・無料・クロスプラットフォーム
  • Live Server / Live Preview 拡張: 保存即リロード、HTML 学習に最適
  • ブラウザ DevTools (F12): Elements / Console / Network / Lighthouse
  • Emmet: VS Code 標準搭載。! + Tab で HTML5 ボイラープレート、div.box>ul>li*3 でツリー生成
  • モダンな JS/CSS 統合なら Vite（npm create vite）。Webpack より高速

最小構成: テキストエディタ + ブラウザ

HTML はテキストファイルを書いてブラウザで開くだけで動きます。Hello World レベルなら何もインストール不要:




  
  Hello


  
Hello, HTML

これを index.html として保存 → ダブルクリックでブラウザに表示されます。とはいえ実務では効率化のため、以下のツールが必須です。

テキストエディタ / IDE 選び

エディタ料金特徴2026 現在の状況
Visual Studio Code無料軽量・拡張豊富・Git 統合・Live Share業界標準
WebStorm有料JetBrains 製・Vue/React/TS が強力商用大規模で人気
Cursor有料VS Code フォーク + AI 補完急成長中
Sublime Text$99動作軽快シェア減少
Vim / Neovim無料キーボード操作の達人向け玄人向けで根強い
Atom無料GitHub 製2022 年に開発終了（EOL）
Brackets無料Adobe 製、HTML/CSS 特化Adobe 提供は終了。OSS コミュニティで継続
Adobe Dreamweaverサブスクビジュアル編集サブスクとして継続中だが新規採用は減

VS Code の HTML 向け推奨拡張機能

拡張機能役割
Live Server / Live Preview保存と同時にブラウザリロード
PrettierHTML/CSS/JS の整形（保存時自動）
ESLintJS の静的解析
HTMLHintHTML の linter
Auto Rename Tag開始タグを書き換えると終了タグも同時に
Highlight Matching Tag対応タグのハイライト
Path Intellisenseパスの補完（画像/CSS/JS の参照）
indent-rainbowインデントを色で可視化
Color HighlightCSS の色コードをプレビュー
GitLensGit 履歴を行単位で表示
Japanese Language PackVS Code の UI を日本語化
 
# CLI から拡張インストール
code --install-extension esbenp.prettier-vscode
code --install-extension ritwickdey.LiveServer
code --install-extension dbaeumer.vscode-eslint
code --install-extension formulahendry.auto-rename-tag

Live Server / Live Preview

保存即リロードは HTML 学習の体験を激変させます。代表的な選択肢:

ツール使い方
Live Server (VS Code 拡張)HTML を開いて右下「Go Live」
Live Preview (VS Code 公式)Microsoft 製の公式拡張。エディタ内プレビュー
browser-syncnpm i -g browser-sync → browser-sync start --server
Vitenpm create vite → npm run dev で HMR
Python http.serverpython -m http.server（リロードはなし）

Emmet（VS Code 標準搭載）

HTML/CSS の省略記法で爆速入力できます。! + Tab で HTML5 のボイラープレートが生成されるのが有名:

入力: !
Tab を押す ↓
↓ 出力:




    
    
    
    Document






------

入力: div.container>ul.menu>li.item*3>a{Item $}
Tab ↓
Emmet 記号意味例 → 出力
el.clsクラス付き要素div.box →
el#idID 付きdiv#main
>子要素ul>li
+兄弟h1+p
*NN 回繰返しli*5
$連番li.item-$*3
{text}テキストp{Hello}
[attr=value]属性a[href="/"]

ブラウザ DevTools（F12）

ブラウザに標準搭載されている開発者ツール。F12 キー（または右クリック → 検証）で開きます。

  • Elements: HTML 構造の確認と編集、CSS の調整
  • Console: JavaScript の対話実行、エラー確認
  • Sources: スクリプトのデバッグ（ブレークポイント）
  • Network: 通信ログ、API レスポンス、画像サイズ
  • Application: localStorage / Cookie / Service Worker
  • Lighthouse: パフォーマンス / アクセシビリティ / SEO 自動監査
  • Recorder: ユーザー操作を記録して再生
  • デバイスモード: スマホサイズでのプレビュー

静的解析・整形ツール

# Prettier（HTML/CSS/JS 統一フォーマッタ）
npm install --save-dev prettier
echo '{ "tabWidth": 2, "printWidth": 100 }' > .prettierrc

npx prettier --write "**/*.{html,css,js}"

# HTMLHint
npm install --save-dev htmlhint
npx htmlhint "**/*.html"

# Stylelint
npm install --save-dev stylelint stylelint-config-standard
npx stylelint "**/*.css"

# W3C Validator（公式）
# https://validator.w3.org/ にファイルアップロード or URL 入力
# CLI 版: html-validate
npm install --save-dev html-validate
npx html-validate "**/*.html"

JS フレームワーク向けセットアップ（Vite / Webpack）

# Vite（推奨・最速）
npm create vite@latest myapp
cd myapp
npm install
npm run dev     # → http://localhost:5173

# テンプレート選択肢:
# vanilla / vanilla-ts / vue / react / svelte / lit / preact / solid

# Webpack（旧来の定番、設定は重い）
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npx webpack serve

# Parcel（ゼロコンフィグ）
npm install --save-dev parcel
npx parcel index.html

ローカルサーバが必要な理由

file:// でファイルを直接開くと、以下が動きません:

  • fetch / XHR: CORS エラー / file プロトコル拒否
  • ES Modules (