1.

HTML ファイル作成手順完全ガイド（雛形 / VS Code / Live Server / フォルダ構造）

編集
この記事の要点
  • テキストエディタで index.html を作成、UTF-8 で保存
  • VS Code なら ! + Tab（Emmet）で雛形が一発展開
  • 雛形: <!DOCTYPE html> / <html lang="ja"> / <meta charset="UTF-8"> / <title> 必須
  • Live Server 拡張でブラウザ自動リロード（保存と同時に反映）
  • フォルダ構成例: index.html + assets/css/ + assets/js/ + assets/images/
  • 公開前に Lighthouse（DevTools）でアクセシビリティ / SEO チェック

必要なもの

  • テキストエディタ: VS Code（無料・推奨） / Sublime Text / Notepad++ / Atom 等
  • ブラウザ: Chrome / Edge / Firefox / Safari（動作確認用、複数あると望ましい）
  • あれば便利: Git（バージョン管理）/ Node.js（ビルドツール）

手順1: フォルダを作る

# 任意の場所にプロジェクト用フォルダを作成
mkdir my-site
cd my-site

# 推奨フォルダ構成
mkdir -p assets/css assets/js assets/images

# 結果
# my-site/
# ├── index.html
# └── assets/
#     ├── css/
#     │   └── style.css
#     ├── js/
#     │   └── main.js
#     └── images/

手順2: index.html を作る

エディタで新規ファイル → index.html で保存（UTF-8 / 改行 LF 推奨）。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
    <meta name="description" content="このページの説明文を 120 文字程度で">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <p>これは私の最初の HTML ページです。</p>

    <script src="assets/js/main.js"></script>
</body>
</html>

必須要素の解説

要素役割省略すると
<!DOCTYPE html>HTML5 宣言、Standards Mode 切替Quirks Mode で CSS 崩れ
lang="ja"言語指定（読み上げ / 翻訳）スクリーンリーダーが英語読み上げ
<meta charset="UTF-8">文字コード宣言日本語が文字化け
<meta name="viewport">モバイル表示倍率スマホで小さく表示
<title>タブ名 / 検索結果タイトル"Untitled" 表示、SEO 0 点
<meta description>検索結果の説明文検索エンジンが本文から抽出

VS Code で爆速作成: Emmet

VS Code は Emmet という省略記法を標準搭載。空の .html ファイルで ! + Tab を押すだけで雛形展開:

# 空ファイルで「!」と打ち Tab を押す
!  →  [Tab]

# ↓ 一気に展開される

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

VS Code 設定で lang="ja" にする

// .vscode/settings.json または ユーザ設定
{
    "emmet.variables": {
        "lang": "ja"
    },
    "emmet.includeLanguages": {
        "blade": "html"
    }
}

Emmet の便利スニペット

# よく使う Emmet 略記
ul>li*3              → <ul><li></li><li></li><li></li></ul>
nav>ul>li*5>a        → ナビゲーション 5 リンク雛形
.container>.row>.col*3 → Bootstrap 風グリッド
header+main+footer   → セクション 3 つ並列

# 入力テキストや属性も
a[href="/about"]{About}  → <a href="/about">About</a>
img[src="logo.png" alt="ロゴ"]

Live Server で自動リロード

HTML を保存するたびに手動でブラウザリロードするのは非効率。Live Server 拡張がおすすめ:

  1. VS Code 拡張機能から「Live Server」（Ritwick Dey 作）をインストール
  2. index.html を右クリック → Open with Live Server
  3. http://127.0.0.1:5500 でブラウザが開く
  4. ファイル保存 → 自動でブラウザリロード

Node.js が入っているなら

# npx で http-server を起動
npx http-server -p 8080

# または Live Server CLI
npx live-server

# Python が入っているなら
python3 -m http.server 8080
# → http://localhost:8080 で確認

画像 / CSS / JS の相対参照

ファイル構造に応じて相対パスで参照します:

<!-- index.html から見たパス -->

<!-- 同階層のファイル -->
<link rel="stylesheet" href="style.css">

<!-- assets/css/style.css -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- または / で始めるルート相対パス（Web 公開時のみ有効） -->
<link rel="stylesheet" href="/assets/css/style.css">

<!-- 親フォルダ参照 -->
<link rel="stylesheet" href="../style.css">

<!-- 画像 -->
<img src="assets/images/logo.png" alt="ロゴ" width="100" height="50">

<!-- JS（body 末尾推奨） -->
<script src="assets/js/main.js"></script>
<script src="assets/js/main.js" defer></script>  <!-- ★ defer 推奨 -->

推奨フォルダ構成（中規模まで）

my-site/
├── index.html               ← トップ
├── about.html               ← サブページ
├── contact.html
├── assets/
│   ├── css/
│   │   ├── reset.css
│   │   ├── style.css
│   │   └── responsive.css
│   ├── js/
│   │   ├── main.js
│   │   └── vendor/
│   │       └── jquery.min.js
│   ├── images/
│   │   ├── logo.svg
│   │   ├── hero.jpg
│   │   └── icons/
│   └── fonts/
│       └── noto-sans.woff2
├── pages/                   ← 詳細ページ群
│   └── product-detail.html
├── .gitignore
├── README.md
└── package.json             ← Node.js 使う場合

ファイル名の慣習

  • 全て小文字: index.html / about.html（大文字小文字を区別する OS 対策）
  • ハイフン区切り: product-list.html（アンダースコアより SEO 上推奨）
  • スペース禁止: my page.html → my-page.html
  • 日本語ファイル名禁止: 会社案内.html → about.html（URL エンコードで読みにくくなる）
  • トップは index.html: ほとんどの Web サーバが / アクセスで自動配信

公開前のチェック: Lighthouse

Chrome DevTools 標準搭載の品質チェッカー:

  1. Chrome で対象ページを開く
  2. F12 で DevTools を開く
  3. Lighthouse タブを選択
  4. 「Analyze page load」をクリック
  5. Performance / Accessibility / Best Practices / SEO の点数（0〜100）が出る

最低限クリアしたい項目

  • alt 属性がない画像 → 必ず追加
  • label がない form 要素 → 必ず追加
  • テキストのコントラスト不足 → 色を調整
  • meta description がない → 追加
  • title が空 → 必ず設定
  • HTTPS でない → Let's Encrypt 等で対応

FAQ

Q: メモ帳で書けばいい？
A: 書けますが、シンタックスハイライト / 補完が無いのでミスが増えます。VS Code 等の無料エディタ推奨。

Q: 拡張子は .htm と .html どちら？
A: 現代は .html 一択。.htm は DOS 8.3 ファイル名制限時代の名残です。

Q: 1 ファイルに全部書いていい？
A: 学習用なら OK。実用では CSS / JS は別ファイル化、保守性 / キャッシュ効率で有利です。

Q: スマホで確認したい
A: Live Server なら同一 LAN のスマホから http://<PC の IP>:5500 でアクセス可。または ngrok で公開 URL 化。

編集
Post Share
子ページ

子ページはありません

同階層のページ

同階層のページはありません

2026-06-11 07:12:00 guest 244

人気ページ

最近更新/作成されたページ