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

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

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

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

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

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

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

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

1. 1元を保存index-before.html を別に残す。
2. 2h1だけ変更大見出しの文字を指定。色や本文はそのまま。
3. 3表示を再確認index.html を再読み込みして見出しを見る。
4. 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 を別名で残してから、index-before.html の内容を index.html に戻します。名前が似ているので、コピー元と上書き先を確認してから操作してください。他のサイトのファイルには触れません。

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

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

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