ファイルを作ってもらう
中級HTMLなどのファイルをClaude Codeに作成してもらい、ブラウザで確認します。
座学
この講座で学べること
- ✓Claude Codeにテキスト・HTMLなど様々な種類のファイルを作成してもらえることを理解する
- ✓HTMLファイルをブラウザにドラッグ＆ドロップして確認する手順を習得する
- ✓ファイルとフォルダの関係（書類と棚のイメージ）を説明できるようになる
- ✓作成後に内容を変更してもらう修正依頼の流れを体験する
テキストファイルからHTMLまで、Claude Codeはいろんな種類のファイルを作れます。たとえば「自己紹介のWebページを作って」と伝えるとHTMLとCSSをセットで用意してくれますし、「メモを保存して」と言えば.txtでサクッと作ってくれます。プログラミングの知識は不要です。「〇〇のファイルを作って」と伝えるだけで、内容まで書いてくれます。
「ファイルはわかるけどフォルダとの違いがよくわからない」という方向けに一言。フォルダはファイルを入れる引き出しみたいなもので、中にさらに別のフォルダを入れることもできます。ファイルが実際に中身のある書類だとすると、フォルダはそれをまとめておく棚のイメージです。たとえば「プロジェクト」フォルダの中に「index.html」と「style.css」が入っている、という構造が基本形です。
Claude Codeは複数のファイルを一度に作ることもできます。「index.htmlとstyle.cssを一緒に作って」と伝えると、セットで作成してくれます。 ただし初めのうちは1ファイルずつ確認しながら進めることをおすすめします。何が作られたか把握しやすくなり、うまくいかなかったときに原因を特定しやすくなります。
ファイルとフォルダの関係
引き出し・箱のようなもの。ファイルをまとめて整理する入れ物。中にさらにフォルダを入れられる。
書類・ノートのようなもの。実際の内容が書かれている。名前と拡張子（.txt/.html等）がセット。
構造の例
.html
ウェブページ
.css
デザイン
.txt
テキスト
.md
Markdown
実践手順
ステップ1：HTMLファイルを作ってもらう
以下のように入力してHTMLファイルを作成してもらいましょう。
index.htmlというファイルを作って、タイトルが「私のページ」のシンプルなHTMLを書いてくださいステップ2：作られたファイルをブラウザで開く
フォルダを開いてindex.htmlを探してください。そのファイルをChromeやEdgeなどのブラウザウィンドウにドラッグ&ドロップすると、ウェブページとして表示されます。「私のページ」というタイトルが表示されれば成功です。
ステップ3：内容を変更してもらう
Claude Codeのチャットに戻り、以下のように入力して内容を変えてもらいましょう。保存後にブラウザでページを再読み込み（F5キー）すると変化が確認できます。
タイトルを「はじめてのWebページ」に変えてください確認チェック
講座を終える前に、以下の項目を確認しましょう。