簡単な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ファイルをブラウザで確認する方法
📁フォルダを開く
エクスプローラー（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>
<h1>見出し</h1>
<p>本文テキスト</p>
← ブラウザに表示される内容
</body>
</html>
ページの設定情報（ブラウザには非表示）
実際にブラウザに表示される内容
実践手順
ステップ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：内容を変えてもらう
表示されたページの内容を変えてみましょう。「名前の部分」「趣味の内容」など、好きな箇所を指定して変更を依頼してください。
名前を「山田太郎」に、趣味を「読書・料理」に変えてください確認チェック
講座を終える前に、以下の項目を確認しましょう。