ファイルを作ってもらう
中級HTMLなどのファイルをClaude Codeに作成してもらい、ブラウザで確認します。
座学
この講座で学べること
- ✓Claude Codeにテキスト・HTMLなど様々な種類のファイルを作成してもらえることを理解する
- ✓HTMLファイルをブラウザにドラッグ＆ドロップして確認する手順を習得する
- ✓ファイルとフォルダの関係（書類と棚のイメージ）を説明できるようになる
- ✓作成後に内容を変更してもらう修正依頼の流れを体験する
テキストファイルからHTMLまで、Claude Codeはさまざまな種類のファイルを作れます。「自己紹介のWebページを作って」と伝えるとHTMLとCSSをセットで用意してくれますし、「メモを保存して」と言えば.txtでサッと作ってくれます。プログラミングの知識は不要で、「〇〇のファイルを作って」と伝えるだけで内容まで書いてくれます。
ファイルとフォルダの違いを整理しておきましょう。ファイルは実際に中身がある書類で、フォルダはそのファイルをまとめておく棚のようなものです。フォルダの中にさらに別のフォルダを入れることもできます。例えば「my-project」フォルダの中に「index.html」と「style.css」が入っている、という入れ子構造がウェブ開発の基本形です。Claude Codeにファイルを作ってもらうときは「〇〇フォルダの中に△△ファイルを作って」と場所も指定すると迷いなく動いてくれます。
Claude Codeは複数のファイルを一度に作ることもできます。「index.htmlとstyle.cssを一緒に作って」と伝えると、セットで作成してくれます。ただし最初のうちは1ファイルずつ確認しながら進めることをおすすめします。何が作られたかを把握しやすく、意図と違うものができたときに原因を特定しやすくなります。
作成したファイルはClaude Codeが「ファイルを作成しました」と報告した後、実際のフォルダを開いて存在を確認する習慣をつけましょう。特にHTMLファイルはブラウザにドラッグ＆ドロップするだけで表示を確認できます。サーバーの設定もインターネット接続も不要で、自分のパソコン上でウェブページとして開けるのが大きな利点です。
ファイルとフォルダの関係
引き出し・箱のようなもの。ファイルをまとめて整理する入れ物。中にさらにフォルダを入れられる。
書類・ノートのようなもの。実際の内容が書かれている。名前と拡張子（.txt/.html等）がセット。
構造の例
.html
ウェブページ
.css
デザイン
.txt
テキスト
.md
Markdown
実践手順
ステップ1：HTMLファイルを作ってもらう
以下のように入力してHTMLファイルを作成してもらいましょう。
index.htmlというファイルを作って、タイトルが「私のページ」のシンプルなHTMLを書いてくださいステップ2：作られたファイルをブラウザで開く
フォルダを開いてindex.htmlを探してください。そのファイルをChromeやEdgeなどのブラウザウィンドウにドラッグ&ドロップすると、ウェブページとして表示されます。「私のページ」というタイトルが表示されれば成功です。
ステップ3：内容を変更してもらう
Claude Codeのチャットに戻り、以下のように入力して内容を変えてもらいましょう。保存後にブラウザでページを再読み込み（F5キー）すると変化が確認できます。
タイトルを「はじめてのWebページ」に変えてください確認チェック
講座を終える前に、以下の項目を確認しましょう。
よくある質問
Q. Claude Codeが「ファイルを作成しました」と言っているのにファイルが見当たりません
A. Claude Codeを起動したフォルダの場所を確認してください。作成されるファイルはClaude Codeを起動したフォルダ（カレントディレクトリ）に保存されます。どこで起動したかわからない場合は、Claude Codeのチャットで「今どのフォルダで作業していますか？」と聞くとフルパスを教えてくれます。
Q. HTMLファイルをブラウザで開いたら文字化けしています
A. HTMLファイルの先頭に文字コードの指定が必要です。Claude Codeに「index.htmlの先頭に `<meta charset='UTF-8'>` を追加してください」と伝えると修正してくれます。日本語を含むHTMLを作るときはこの1行が必須です。
Q. ファイルを間違えて削除してしまいました
A. Claude Codeで作業フォルダをGitで管理している場合は `git checkout` で復元できます。まだGitを設定していない場合は、もう一度Claude Codeに「〇〇のファイルを作り直してください」と依頼するのが最も早い対処です。重要なファイルは定期的にGitでコミットしておくことが根本的な対策です。