#04

簡単なWebページを作る（前編）

中級

Claude CodeにHTMLファイルを作ってもらい、ブラウザで自己紹介ページを表示します。

座学

この講座で学べること

✓HTMLが「何を表示するか」、CSSが「どう見せるか」の担当であることを理解する
✓Claude CodeにHTML・CSSをセットで作成してもらう手順を習得する
✓サーバーなしでブラウザで直接HTMLファイルを開く方法を習得する
✓指示を追加して内容を変更してもらうサイクルを体験する

HTMLとは、ウェブページの「骨格」を作るための言語です。見出し・本文・画像・リンクなど「ページに何を表示するか」を定義します。CSSはHTMLで作った骨格に「飾り付け」をする言語で、色・フォント・余白・レイアウトなどのデザインを担当します。この2つがセットでウェブページの基本を形成しています。Claude Codeに作ってもらえばコードを書かなくてもウェブページが作れます。

「自己紹介ページを作ってください」と伝えると、Claude CodeがHTMLとCSSのファイルを両方作ってくれます。作成されたファイルをChromeやEdgeにドラッグ＆ドロップするだけで、インターネットなしで自分のパソコン上にウェブページが表示されます。サーバーもホスティングも一切不要で、気軽に試せるのが最大のメリットです。

最初はシンプルなHTMLで全く問題ありません。「もっとおしゃれにしてください」「背景色を変えてください」「フォントを変えてください」と後から伝えれば、Claude Codeが修正してくれます。完璧に作ろうとするよりも、まずは動くものを作ってブラウザで確認する体験をすることが大切です。

HTMLファイルの基本構造を知っておくと修正の指示が出しやすくなります。ページのタイトルは `<title>` タグ、見出しは `<h1>`〜`<h6>` タグ、本文は `<p>` タグで書かれています。Claude Codeに「h1タグの文字を大きくして」「pタグの行間を広げて」と指定すると、意図した箇所だけを正確に変更してくれます。コードを読み書きしなくても、タグの名前だけ覚えておくと指示の精度が上がります。

HTMLファイルをブラウザで確認する方法

📁フォルダを開く

エクスプローラー（Windows）またはFinder（Mac）でindex.htmlがあるフォルダを開く

🖱️ファイルをブラウザにドラッグ＆ドロップ

index.html ファイルをChromeやEdgeなどのブラウザウィンドウへドラッグ＆ドロップする

🌐ブラウザに表示される

URLバーが「file:///...」から始まるURLになり、作ったページが表示される

💡 ファイルを変更したら、ブラウザで F5キー（Windows）または Cmd+R（Mac） を押すと最新の状態に更新されます

HTMLの基本構造

<!DOCTYPE html>

<html>

<head>

<title>私のページ</title>

← タブに表示されるタイトル

</head>

<body>

<p>本文テキスト</p>

← ブラウザに表示される内容

</body>

</html>

<head>

ページの設定情報（ブラウザには非表示）

<body>

実際にブラウザに表示される内容

💡 HTMLは「何を表示するか」、CSSは「どう見せるか」の担当です。Claude Codeに作ってもらえばコードを書かなくてもOKです。

実践手順

ステップ1：プロジェクトフォルダを作る

Claude Codeのチャットに以下を入力してください。作業用のフォルダが作られます。

my-pageというフォルダを作ってください

ステップ2：自己紹介ページを作ってもらう

以下の指示をClaude Codeに送ってください。名前・趣味・一言コメントを含むHTMLファイルが作成されます。

my-pageフォルダの中にindex.htmlを作ってください。
タイトルは「私のページ」、
名前・趣味・一言コメントを表示する
シンプルなHTMLにしてください

ステップ3：ブラウザで開いて確認する

エクスプローラー（Windows）またはFinder（Mac）でmy-pageフォルダを開き、index.htmlをChromeやEdgeなどのブラウザウィンドウへドラッグ＆ドロップしてください。ウェブページとして表示されれば成功です。

ステップ4：内容を変えてもらう

表示されたページの内容を変えてみましょう。「名前の部分」「趣味の内容」など、好きな箇所を指定して変更を依頼してください。

名前を「山田太郎」に、趣味を「読書・料理」に変えてください

確認チェック

講座を終える前に、以下の項目を確認しましょう。

index.htmlが作成されたブラウザで自己紹介ページが表示できた内容を変更してもらえた

よくある質問

Q. HTMLとCSSを別ファイルにするのはなぜですか？

A. デザイン（CSS）をコンテンツ（HTML）から分離することで、管理がしやすくなります。同じCSSファイルを複数のHTMLページで共有できるため、デザインを一箇所変えるだけで全ページに反映されます。Claude Codeに「CSSを別ファイルにして」と伝えると自動で分けてくれます。

Q. ブラウザで開いたら真っ白なページが表示されます

A. HTMLファイルの中身が空か、body タグ内に内容がない可能性があります。Claude Codeに「index.htmlを開いて内容を確認して、表示されるコンテンツを追加してください」と伝えてみてください。また文字コード指定（`<meta charset='UTF-8'>`）が抜けていると日本語が表示されないことがあります。

Q. ブラウザを再読み込みしても変更が反映されません

A. Claude Codeがファイルを変更した後、ブラウザのキャッシュが古い状態を表示していることがあります。Ctrl+Shift+R（Mac: Cmd+Shift+R）で強制リロードしてください。それでも反映されない場合は、ファイルを保存できているかClaude Codeに確認してもらいましょう。