ブラウザー・スクリーンショット・画像の活用

Codex 学習目次に戻る

目標と準備

この段落の教材・資料: 最初のプロジェクト

手順1：ブラウザー入口を選ぶ

デスクトップはツールバー、URL、@Browser から内蔵ブラウザーを使えます。開く鍵は macOS の Cmd＋Shift＋B、Windows の Ctrl＋Shift＋B。Linux は実版のツールバーと提供を確認し同一鍵を仮定しません。CLI・IDE に内蔵 Browser はなく、別 MCP があれば検証し、なければ自分で画面を添付します。

内蔵は独立プロフィールで通常の Chrome・Edge 分頁を自動取得しません。普段の認証を使うなら公式拡張接続を行い環境を区別します。サイト操作許可は文中指示の信頼ではなく、無関係ファイルの送信や権限変更をページの要求だけで行いません。

手順2：起動して正しいページを確認

expected の三試験を確認後、下記でローカル限定サーバーを起動し端末を残します。4173 使用中なら別番号と URL に揃え、他サービスを止めません。これはローカル実習で公開ではありません。

node --test core.test.mjs

py -m http.server 4173 --bind 127.0.0.1

python3 -m http.server 4173 --bind 127.0.0.1

指定 URL で標題、フォーム、篩選を確認し、二つの指定タスクを追加して Build を完了すると 1 active／2 total です。localStorage はプロフィール別なので前後を同じ環境で比べます。既存データがあれば実習プロフィールか別 port を使い、日常の保存を全消去しません。

遠隔 Codex の 127.0.0.1 は遠隔自身で、Web 雲タスクの localhost も利用者 PC ではありません。程序とブラウザーのホストを確認して正式なプレビュー経路を使います。携帯 Remote で確認できても本教材は外部公開を行いません。端末間作業を参照します。

手順3：画面と文字条件を用意

レスポンシブ表示を 390×900 と 1280×900 CSS ピクセルにし、倍率と二件のデータを固定します。各 OS の範囲指定スクリーンショットでページだけを before 名に保存します。デバイスの表示倍率で PNG のピクセル数は変わるため、viewport、倍率、ブラウザーのバージョン、日付を別記し、画像寸法から推測しません。

# Visual check
Route: http://127.0.0.1:4173
Browser / version:
OS / date:
CSS viewport: 390 x 900, then 1280 x 900
Zoom:
State: Build complete; Read the AGENTS.md rules active
Before images:
Requested change: reduce header bottom spacing from 36px to 24px
Preserve: task data, labels, focus outline and control sizes
After images:
Behavior checks:
Unverified platforms:

撮影範囲からアカウント、私用タブ、通知を外し、必要なら小さい範囲で撮り直します。他 OS の画面を改題して実測とせず、個人情報は共有前に伏せます。生成画像・概念図はイメージ図と明記し、操作証拠にしません。他人の画像は出典、作者、ライセンス、必要なクレジットを保存し、説明と代替テキストを記事の言語で記します。

手順4：一変更を注釈で依頼

まず Codex デスクトップで実習プロジェクトと新規タスクを開きます。CLI の場合は実習プロジェクトのフォルダーで codex を実行し、新しい対話セッションを始めます。Annotation mode があれば見出しとフォームの間を選んで間隔を記し、親タスクへ要求を送ります。なければ二枚の before 画像と文字で場所を示します。注釈の保存だけでは編集は始まらず、タスクの送信が必要です。曖昧な美観ではなく、値、維持する動作、二つの表示幅での検証を指定します。

Use the attached before screenshots and the local practice page at http://127.0.0.1:4173.
In style.css, reduce the existing header bottom margin from 36px to 24px.
Keep the task data, labels, responsive form layout, 46px controls and visible focus outline unchanged.
Verify the actual page at 390x900 and 1280x900 CSS pixels with the same two tasks.
Check no horizontal page overflow, usable filtering, keyboard focus and persistence after reload.
Report the file diff and before/after evidence. If the browser is unavailable, identify that limitation instead of claiming visual verification.

header { margin-bottom: 24px; }

既存36pxを24pxへ置換し、後で上書きされ得る重複規則を足しません。差分で無関係の再構築や焦点枠除去を確認します。開発機能の computed 値は図の類似より明確な証拠です。測定不可なら制限を残して手動比較します。

実習ページでブラウザー開発者ツールの Console を開き、現在の URL を確認して次の読取り計測を実行します。両画面幅で headerMarginBottom が変更前 36px、変更後 24px と記録します。header 不在の null は 0px や成功ではなく、ページと要素の再確認が必要です。

(() => {
  const header = document.querySelector('header');
  const page = document.documentElement;
  return {
    url: location.href,
    viewportWidth: page.clientWidth,
    headerMarginBottom: header ? getComputedStyle(header).marginBottom : null,
    horizontalOverflow: page.scrollWidth > page.clientWidth,
  };
})()

horizontalOverflow は false が期待値ですが、全ページ幅だけの検査です。操作性、可読性、フォーカスは次のキーボード・長い題名・保存の手順で確認します。Console を実際に開けない場合は未計測とし、期待値を観察結果に転記しません。 値の定義は getComputedStyle と scrollWidth を参照します。

手順5：実画面で検証・復元

同二寸法で再読込・after 保存をし、間隔、入力、Active 一件、Tab 焦点、保存を確認します。100文字近い題名でも折返しと横溢れなしを確認し、短文だけで境界合格としません。core 試験は画面確認と別欄にします。

未反映は URL、配信ディレクトリ、保存、キャッシュ、上書きを見ます。空白は HTTP の模块読込みを確認し file:// 制限を回帰と混同しません。操作不能なら画面未確認と報告し、生成 after 図で代用しません。margin だけ36pxへ戻し再確認、自己サーバーを Ctrl＋C で止めます。

実ページ、二寸法、変更ファイル、確認動作、未測 OS が分かる記録を残します。自撮影と参考図を分け日付・出典を付けます。内蔵入口・注釈・権限は公式確認で、利用者アカウントや全 OS 操作を主張しません。次は自動化です。

Codex 学習目次に戻る

詳しい説明を読む

Reference to Change to Compare

• AIツール
• チュートリアル
• Codex