情報確認日：2026年10月14日
AIが作ったHTMLを保存しても動かない場合は、HTMLだけで完結しているかを確かめてください。CSS、画像、JavaScript、外部サービスが別なら、HTML一枚の保存では足りません。保存名と拡張子、必要なファイル、ネット接続、ブラウザーでの開き方を順に確認します。
プレビューと、保存後のファイルは別に確認
AIの画面内で表示できた成果物が、そのままHTML一枚で持ち出せるとは限りません。プレビューの環境には、表示に必要なライブラリや処理が揃っていた可能性があるためです。
OpenAIのファイル案内は、利用できる場合にHTMLのインタラクティブプレビューとソース表示を使えると説明しています。これは全HTMLの単体保存やオフライン動作を保証する説明ではありません。
保存できなかった問題と、保存できたHTMLが動かない問題も分けます。本記事は、手元へ取得したファイルの中身と依存関係を確認する手順です。
表示がおかしいときの、最初の分け方
| 症状 | 確認する候補 |
|---|---|
| コードが文字として出る | 拡張子、保存形式、余計な説明 |
| 文章だけで装飾がない | CSSが同梱されているか |
| 画像だけ出ない | 画像ファイル、参照先、名前 |
| ボタンが動かない | JavaScript、読込エラー |
| ネットなしで止まる | 外部ライブラリ、API、フォント |
| プレビューでは動く | 生成環境と保存先の違い |
表は原因候補で、症状だけから確定するものではありません。別のブラウザーで見ても同じか、同じフォルダー構成で開いているかも確かめます。
HTMLのほかに、何が必要かを聞く
MDNのファイル構成の解説は、Webページが文章、コード、スタイル、画像など複数のファイルから構成されることを説明しています。
たとえばHTMLがimages/photo.pngを参照しているなら、同じ場所にimagesフォルダーとphoto.pngが必要です。HTMLだけを別のフォルダーへ移せば、参照関係が変わります。
CSSやJavaScriptのファイル名も同様です。受け取ったZIPがあるなら、必要なファイルを含むフォルダー構成を保ちます。HTML一つを抜き出して動かない場合は、他のファイルの有無を確認してください。
大文字・小文字や拡張子も揃えます。自分のPCでは通っていた名前が、別のサーバーでは一致しない場合があります。AIへ「必要なファイル名、フォルダー、参照する場所を一覧にして」と依頼すると確認しやすくなります。
外部の参照先があると、ネットが必要
インターネット上のライブラリ、フォント、画像をURLで読む設計なら、保存先のPCからそのURLへ接続する必要があります。ファイルが手元にあることと、全処理が手元だけで済むことは違います。
また、ボタンを押すと外部APIへ問い合わせる場合は、接続、利用条件、認証が別に必要です。「HTMLで出して」という依頼だけで、それらが不要になるわけではありません。
持ち出して使う予定なら、作成時に「ネット接続なし」「外部サービスなし」「HTML・CSS・JavaScriptを一つのファイルに含める」と条件を伝えます。画像やデータも必要なら、その同梱方法を確認します。
file形式で開くと、制約が出る処理がある
HTMLをダブルクリックすると、ブラウザーはfile:///形式で開く場合があります。MDNの同一オリジンの説明は、現代のブラウザーではfile形式の読み込みを独立した由来として扱い、同じフォルダーのファイルでもCORSエラーが起こり得ると説明しています。
静的な画像が出ることと、JavaScriptがデータを読み込めることは同じ条件ではありません。モジュールやデータ取得などを使っている場合は、file形式での動作を設計段階で確認します。
必要な実行環境がある場合は、その提供者の手順に従います。ブラウザーの保護を無効にして直そうとせず、単体で動く構成へ変えるか、適切な環境で動かすかを依頼してください。
AIへ修正を頼む例
取得したHTMLをPCで開くと、ボタンだけ動きません。
外部ファイル・ライブラリ・ネット接続への依存を一覧にしてください。
可能なら、一つのHTMLでオフライン動作する版に直してください。
データと表示内容は変えず、難しい機能があれば理由を示してください。
保存後に使うブラウザーで確認する手順も付けてください。
編集部作成の例です。外部サービスとの通信が本質の機能なら、完全なオフライン版へ置き換えると機能自体が変わります。通信をなくした結果、最新データを取得できなくなる点などを確認します。
保存後は、利用する環境で開く
HTMLの拡張子を確認し、コードの前後に説明文やMarkdownの記号が混ざっていないかを読みます。その後、実際に使うブラウザーで、全ボタン、計算、入力、画像、出典リンクを試します。
オフライン利用が必要なら、ネットを使わない条件でも必要機能を確認します。計算ツールは、入力値と期待する答えを元の計算方法で照合します。見た目が完成していても、計算が正しいとは限らないからです。
直らないときは、ファイル構成、ブラウザー、開いたURLの形式、正確なエラー、動かない操作を添えて依頼します。「保存したが動かない」を、依存ファイルと実行環境へ分けると、修正する箇所を特定できます。
参照資料
あわせて読みたい記事
執筆・検証：カネさん（政経プラスチャンネル運営）＋ ChatGPT
