この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
更新日時:2026-06-11 07:07:02
タイトル: HTMLファイルの作成
SEOタイトル: HTML ファイル作成手順完全ガイド（雛形 / VS Code / Live Server / フォルダ構造）
| この記事の要点 |
- テキストエディタで
index.html を作成、UTF-8 で保存 - VS Code なら
! + Tab（Emmet）で雛形が一発展開 - 雛形:
</code> 必須</li><li><strong>Live Server</strong> 拡張でブラウザ自動リロード（保存と同時に反映）</li><li>フォルダ構成例: <code>index.html</code> + <code>assets/css/</code> + <code>assets/js/</code> + <code>assets/images/</code></li><li>公開前に <strong>Lighthouse</strong>（DevTools）でアクセシビリティ / SEO チェック</li></ul></td></tr></table>
<h2>必要なもの</h2>
<ul>
<li><strong>テキストエディタ</strong>: VS Code（無料・推奨） / Sublime Text / Notepad++ / Atom 等</li>
<li><strong>ブラウザ</strong>: Chrome / Edge / Firefox / Safari（動作確認用、複数あると望ましい）</li>
<li>あれば便利: <strong>Git</strong>（バージョン管理）/ <strong>Node.js</strong>（ビルドツール）</li>
</ul>
<h2>手順1: フォルダを作る</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># 任意の場所にプロジェクト用フォルダを作成
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/</code></pre>
<h2>手順2: index.html を作る</h2>
<p>エディタで新規ファイル → <code>index.html</code> で保存（<strong>UTF-8 / 改行 LF</strong> 推奨）。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!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
Hello, world!
これは私の最初の HTML ページです。
|
