CodexでWebページを修正：一か所直して、表示を確認

自分のWebページを直してみたい人は、まず見出し一か所だけを変更し、ブラウザーで確かめる作業から始められます。今回は、通信やログインを使わない練習用HTMLを使います。自分の本番サイトを直接変更する練習ではありません。

HTMLはWebページの内容を記述するテキストです。ここではコードを全部覚える必要はありません。変更する場所を指定し、表示が意図どおりになったかを確認します。

練習用ページを保存して開く

練習ページの原稿をダウンロードし、空の練習フォルダーに index.html という名前で保存します。ダウンロード元はテキストなので、保存時に名前を変更してください。Windowsではファイル名の拡張子を表示し、index.html.txt になっていないか確認します。

index.html をブラウザーへドラッグすると、元の見出し「わたしの案内ページ」が表示されます。保存名が分からなくなったら、エクスプローラーに表示される名前を確認します。

元のファイルを index-before.html という名前でコピーして残します。以降は index.html だけを変更します。

操作の順番と、途中で確かめることを図で確認します。

図解一か所の変更を表示と差分で確かめる

1元を保存index-before.html を別に残す。
2h1だけ変更大見出しの文字を指定。色や本文はそのまま。
3表示を再確認index.html を再読み込みして見出しを見る。
4差分を照合変更した一か所以外が元と同じか確認。

具体的な依頼文と、うまく進まない場合の確認先は本文で説明します。

変更する場所を一つに絞って頼む

Codexでは、この2ファイルがある練習フォルダーを作業場所にします。準備が必要ならWindowsでの使い始めを参照してください。

index.html の画面に表示する大見出しを確認してください。
「わたしの案内ページ」を「はじめての作品紹介」に変更してください。
変更するのは h1 の文字だけです。
色、レイアウト、本文、ページの title、リンク先は変えないでください。
index-before.html は変更しないでください。
変更後に、どこを変えたかと未確認のことを報告してください。

h1 はこの練習ページの大見出しを表す目印です。ブラウザーのタブ名に使う title とは別です。今回、タブ名が元のままでも失敗ではありません。

保存したページを再読み込みする

ブラウザーで index.html を開き直すか再読み込みします。「はじめての作品紹介」が表示され、説明文と色が元のままかを確認します。古い表示なら、ファイルを保存できたか、index-before.html の方を開いていないかを確かめます。

index-before.html と index.html の差分を確認してください。
h1 の文字以外に変更がないか点検し、今は追加修正しないでください。

差分とは、変更前後で違う部分です。変更確認の記事では、保存や戻し方も説明しています。AIが「確認した」と言っても、実際にどのファイルや画面を確認したかを読みます。

変更が見えないときの確認表

再読み込みを繰り返す前に、「編集したファイル」と「開いているもの」が同じかを確かめます。

今の状態	確認する場所	この練習での確かめ方
文字が古いまま	編集画面の保存状態	保存後のindex.htmlに新しいh1があるか読む
戻したように見える	ブラウザーのアドレス	index-before.htmlを開いていないか確認する
コードが文字として表示される	実際の拡張子	index.html.txtになっていないか確認する
見出しは新しいがタブ名は古い	h1とtitle	今回はh1だけの変更なので正常

次のメモを埋めると、同じ説明を最初から繰り返さず相談できます。パスに個人名などが入る場合は共有前に伏せます。

編集したファイル：
ブラウザーで開いたファイル：
保存済みか：
期待するh1：はじめての作品紹介
実際のh1：
titleを変更していないか：
まだ確認できていないこと：

この練習の file: で開くページと、開発サーバーの http://localhost:... で開くページでは確認先が違います。別のプロジェクトで開発サーバーを使っている場合は、ターミナルの起動結果に出たURLと一致するかも確認します。表示が古いという理由だけで、ブラウザーの保存データを一括削除する必要はありません。

戻すときは変更したファイルを区別する

やり直したい場合は、今の index.html を別名で残してから、index-before.html の内容を index.html に戻します。名前が似ているので、コピー元と上書き先を確認してから操作してください。他のサイトのファイルには触れません。

ローカル確認と本番公開を分ける

この練習では、ファイルを保存してもインターネットには公開されません。ブラウザーのアドレスが手元のファイルを指していることを確認します。本番への反映は、利用している公開先、更新方法、バックアップが分かってから別の作業として行います。

当サイトでは、この素材の見出しだけを変更し、差分とブラウザーでの表示を確認しています。確認はこの編集タスクで実施しており、Codexの全画面手順やすべてのOSでの動作確認を意味しません。困ったときはエラーを伝える例を使い、開いたファイル名と期待する表示を伝えてください。

見た目の問題は、画像で注目箇所と完成条件を伝える方法も使えます。

実際のページを見ながら直す場合は、ブラウザーで表示と操作を確認する方法を使えます。