HTML ファイルを開くと、ページではなくコードが出る・真っ白になるのはなぜ？

ChatGPT や Claude、友だちが作った .html ファイルを開いたら、クイズやゲームの代わりにコードがずらりと並んだ。あるいは、何も載っていない白い画面だけが出た。どちらも原因はいくつかに絞れて、それぞれ 1 分で確かめられる手がかりを残します。このガイドでは、コードが出るときと真っ白なときを扱います。ページは開くのに画像や見た目が崩れるときは、HTML ファイルの文字化け・画像が出ないときの直し方 を見てください。

自分が作ったファイルを人に送るなら、ページ冒頭のボックス に入れると、アカウントなしでプレビューのリンクができます。このプレビューではスクリプトが止まるので、クイズやゲームは反応しません。「このページを受け取る（無料・カード不要）」から登録すると、ページがアカウントに入り、スクリプトが動いて公開もできるようになります。

見えているものから原因を探す

下の原因は、どれも 2026 年 10 月 25 日に、macOS 26.5.2 の Mac で、新しいプロファイルの Google Chrome 155.0.8059.85 を使って試しました。試し方はそれぞれの節に書いています。

テキストエディターやプレビューで開いている

テキストエディターは、ファイルの中身をそのまま見せます。.html ファイルの中身はコードなので、出てくるのはページではなくコードです。Apple のテキストエディットのガイドによると、テキストエディットは HTML ファイルを「ブラウザで表示するときと同じように（フォーマットしたテキストとして）」表示します。ただし、「テキストエディット」＞「設定」の「開く/保存」で「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示します」を選んでいると、コードが出ます。

プレビューもブラウザではありません。試したプレビューは、コードではなくページの一部を見せました。iPhone の「ファイル」アプリで .html ファイルをタップすると、iOS 26.3 でのテスト ではクイックルックのプレビューが開きました。Mac のクイックルックも、macOS 26.5.2 でのテスト（英語）で同じでした。どちらも文字と CSS は出て、JavaScript は動きませんでした。Android の「HTML Viewer」アプリも、Android 16 のエミュレーターでのテスト で同じでした。Google ドライブのヘルプは、プレビューできるファイルの「マークアップ、コード」に .HTML を .CSS や .JS と並べていますが、そのプレビューがページを出すのかコードを出すのかは書いていません。ドライブや Gmail で HTML ファイルを開くテストはしていません。Google ドライブの HTML ファイル と HTML ファイルをメールで送る方法 で扱っています。

エディターに似た表示がもう 1 つあります。Chrome のキーボード ショートカットの一覧では、Ctrl + U（Mac は ⌘ + option + U）が「現在のページの HTML ソースコードを表示する（編集不可）」です。コードが出ているタブのアドレスが view-source: で始まっていたら、そのタブを閉じます。ページは、その前のタブにあります。

直し方: ブラウザでファイルを開きます。Mac では、Control キーを押したままファイルをクリックし、「このアプリケーションで開く」から Chrome か Safari を選びます。手順は Mac のガイド（英語）にあります。スマホでは、iPhone と Android のガイドのとおり、ブラウザで HTML ビューアーを開いてファイルを選びます。

実はテキストファイルになっている

最後の拡張子を隠す設定だと、quiz.html.txt は quiz.html に見えます。そしてブラウザは .txt のファイルを文字として表示します。Apple のヘルプにも、「通常、ファイル名拡張子はmacOSでは表示されません」とあります。ページ全体を page.html.txt という名前で保存して Chrome 155 で開くと、タグがすべて画面に出て、ページのスクリプトは動きませんでした。

本当の名前を見るには、次のようにします。

• Mac: Finder で「Finder」＞「設定」を選び、「詳細」をクリックして「すべてのファイル名拡張子を表示」を選びます。1 つのファイルだけなら、「ファイル」＞「情報を見る」を選び、「名前と拡張子」の「拡張子を非表示」の選択を外します。
• Windows 11: エクスプローラーで「表示」＞「表示」＞「ファイル名拡張子」を選びます。Windows 10 では、「表示」タブの「表示/非表示」グループで「ファイル名拡張子」のチェックボックスをオンにします。

直し方: 名前を .html で終わるように変えます。Microsoft は、拡張子を変えても「ファイルが別の形式に変換されるわけではなく」と書いています。ここではそれで足ります。HTML のコードは、もともと標準テキストだからです。ただし、Word やリッチテキストの書類の名前を .html に変えても、中身は Word やリッチテキストのままです。その場合は、次の節のように標準テキストで保存し直します。

コードが Web ページの文章として保存されている

リッチテキストのエディターは、貼ったコードを新しい Web ページの「文章」として保存することがあります。そのファイルをブラウザで開くと、コードがページの本文になっているので、コードが表示されます。

macOS 26.5.2 のテキストエディット 1.20 で試しました。新しい書類はリッチテキストで始まります。そこに 13 行のページを貼り、名前を .html で終わらせて保存すると、保存の画面のフォーマットが「リッチテキスト書類」から「Webページ (.html)」にひとりでに切り替わりました。保存されたのはテキストエディットが書いた HTML で、コードの 1 行ずつが段落になり、< はすべて < になっていました。Chrome 155 で開くとコードが 1 行ずつ出て、クイズのスクリプトは動きませんでした。

直し方: Apple の テキストエディットのガイド に、本物の HTML ファイルを作る手順があります。「ファイル」＞「新規」を選び、「フォーマット」＞「標準テキストにする」を選びます。コードを貼って「ファイル」＞「保存」を選び、.html で終わる名前を入れます。使う拡張子をたずねられたら、「.htmlを使用」をクリックします。試したのはテキストエディットだけです。ほかのリッチテキストのエディターも同じように保存することがあるので、コードは標準テキストのエディターに貼ってください。

コードがページ全体になっていない

AI の回答には、ページではなくアプリの部品が出てくることがあります。React のコンポーネントは import { useState } from "react"; のような行で始まり、export default function を含みます。ブラウザは、これをそのままでは動かせません。

短い React のクイズのコンポーネントを quiz.html として保存し、Chrome 155 で開きました。ブラウザは JavaScript を文字として表示し、その中に「Capital cities quiz」や「Paris」が混ざっていて、ボタンはどれも動きませんでした。Convika の HTML ビューアーに貼っても、同じ文字が出ました。

もっと小さなつまずきもあります。チャットのコードブロックを、囲みの記号ごとコピーしてしまうことです。```html で始まるファイルは、テストではページの上にその文字が、下に ``` が出ました。ページのほかの部分は動きました。この 2 行を消してください。

直し方: 部品ではなくページを AI に頼みます。

全体を、ブラウザで開くだけで動く 1 つの HTML ファイルにしてください。<!DOCTYPE html> で始め、CSS は <style> タグに、JavaScript は <script> タグに入れ、import、export、ビルドの手順は使わないでください。

リンクを開くとコードが出る

ページではなく、ファイルそのものへのリンクもあります。GitHub の raw ファイル（raw.githubusercontent.com）のリンクは、curl と Chrome 155 で確かめたところ text/plain で返ってきて、Chrome はページのコードを文字のまま表示しました。送った人に、公開してあるページのアドレスを頼むか、ファイルをダウンロードしてブラウザで開きます。

真っ白になる理由

真っ白なページは、たいてい、ページを描くスクリプトが動かなかったしるしです。ゲームや React のアプリ、グラフは、HTML そのものにはほとんど何も書かれていません。

コードが途中で切れている。 保存したコードが途中で終わっていると、ページが真っ白になることがあります。<script> タグの中でコードが切れたキャンバスのゲームを保存すると、Chrome 155 は白い画面を出し、コンソールにもエラーは出ませんでした。理由は HTML の仕様にあります。WHATWG の HTML Standard（英語）によると、スクリプトの途中でファイルが終わると、そのスクリプトには「すでに始まった」という印がつき、実行されません。同じファイルの完全な版では、ゲームの画面が描かれました。コードを最後の </html> までコピーし直すか、ファイル全体をもう一度出すよう AI に頼みます。

ページが同じフォルダのファイルを必要としている。 ビルドしたアプリの index.html が /assets/index.js をモジュールとして読み込むと、パソコンの中から開いたときは真っ白でした。Chrome のコンソールには「Access to script at 'file:///assets/index.js' from origin 'null' has been blocked by CORS policy」と出ました。同じフォルダをローカルのサーバーから開くと動きました。Web 開発者向けの Mozilla の資料 MDN によると、ローカルから（file:// の URL で）HTML ファイルを読み込むと、JavaScript モジュールのセキュリティ要件のために CORS エラーが発生し、テストはサーバー経由で行う必要があります。パソコンの中から開くとほかに何が止まるかは、Mac のガイドのテスト（英語）にあります。

ページがネットを必要としている。 CDN から React と Babel を読み込むクイズを作りました。ネットにつながっていれば、Chrome はクイズを表示しました。ネットを切ると白い画面になり、コンソールには読み込みの失敗が 3 つ出ました。iPhone でのテストでは、クイックルックのプレビューはネットから何も読み込まなかったので、こうしたページはプレビューでも描けません。

スクリプトが止まっている。 Convika の HTML ビューアーで「スクリプトを動かす」のチェックを外すと、同じ React のクイズもやはり真っ白でした。これは手がかりになります。スクリプトを止めると真っ白で、動かすと表示されるなら、そのページはスクリプトが描いています。

エラーを見るには、Chrome のコンソールを開きます。Chrome の DevTools のドキュメントでは、Windows と Linux は Ctrl + Shift + J、Mac は Cmd + Option + J です。赤い行に、読み込めなかったファイルや、失敗した行が出ます。白い画面なのに 1 行も出ないときは、コードが途中で切れていることがあります。

ボタンが反応しない

ページは仕上がって見えるのに何も反応しないなら、表示しているアプリがスクリプトを動かしていません。上のテストでは、iPhone と Mac のクイックルック、Android の「HTML Viewer」アプリがそうでした。ファイルをブラウザで開き直してください。

Convika の HTML ビューアーはスクリプトを動かしますが、ページを convika.com から切り離して動かすので、止まるものがいくつかあります。テスト用のページを、手元で動かしたビューアーに Chrome 155 で貼って試しました。

• ポップアップの箱: alert() も prompt() も何も出しませんでした。コンソールには「Ignored call to 'alert()'. The document is sandboxed」と出ました。答えをアラートの箱で見せるクイズは、ビューアーでは止まって見えます。
• 新しいウィンドウ: target="_blank" のリンクも、window.open() の呼び出しも、どちらも止められました。
• データの保存: localStorage を読もうとすると SecurityError が出ました。スコアを保存するゲームは、その行で止まることがあります。

同じページをパソコンの中から Chrome 155 で開くと、2 つの箱が出て、2 つのウィンドウが開き、データも保存されました。パソコンの中から開けば動くのにビューアーでは動かないなら、理由はこのどれかです。

HTML ビューアーでファイルを確かめる 4 つの手順

ビューアーはファイルをブラウザの中で開き、同じページをスクリプトを動かした状態と止めた状態で見せます。どちらの問題なのかが、ここで見分けられます。

1. HTML ビューアーを開く

無料の HTML ビューアー を開きます。アカウントはいりません。ファイルを読むのはブラウザで、ファイルは Convika のサーバーに届きません。人から届いたファイルなら、心当たりのないファイルは開かずに、まず送った人に確かめてください。気になるファイルは、選ぶ前に「スクリプトを動かす」のチェックを外します。

2. ファイルを選ぶか、コードを貼る

「HTML ファイルを選ぶ」を押して、ファイルを選びます。ビューアーが開くのは 2 MB までの .html と .htm のファイルで、.txt のファイルを置くと「ファイル名が .html か .htm で終わっていません。」と断ります。.txt のファイルは、テキストエディターで開いて全部コピーし、「コードから」を選んで貼り、「ページを表示する」を押します。

3. 「スクリプトを動かす」を外して、また入れる

「スクリプトを動かす」を外すと、ページの HTML と CSS だけが表示されます。外すと真っ白で、入れると動くページは、スクリプトが描いています。どちらでも真っ白なら、コードが途中で切れているか、届かないファイルや CDN を必要としています。どちらでもコードが出るなら、ページ全体になっていないか、文章として保存されています。

4. ページの下の行を読む

ページが style.css や photo.png のような端末の中のファイルを指していると、ビューアーはページの下にその名前を並べます。届いたのは 1 つのファイルだけなので、これらは表示できません。スクリプトが読み込むファイルは、ここには並びません。次にすることは、画像・CSS が出ないとき にあります。

ファイルではなくリンクを送る

送る側なら、リンクを送れば、相手は上の手順をどれもたどらずにすみます。リンクを押せば、スクリプトも動くページがブラウザで開きます。

1. ページ冒頭のボックス にファイルを入れるか、コードを貼ります。アカウントなしで、数秒でプレビューのリンクができます。開けるのは 3 分間で、スクリプトとフォームは止まっています。
2. 「このページを受け取る（無料・カード不要）」から登録します。ページがアカウントに入り、管理画面のプレビューではスクリプトも動きます。
3. 「ページを公開する」を押し、「このページを開ける人」で「一般公開」を選んで「次へ」を押します。はじめての公開では、続いて大きな「無料で公開する」のボタンが出ます。押すとすぐに公開され、ページの下に Convika のバナーが出ます。出したくないときは、その下の「Convika のバナーなしで公開する」から Pro のお申し込み画面に進みます。お申し込み画面の大きなボタン「1日間無料で申し込む」は、カードを登録して始める Pro のトライアルで、最初の 1 日間のあとは、解約しなければ月 ¥1,800 かかります。
4. 「公開URL」のアドレスをコピーして、ファイルの代わりに送ります。

Convika は 1 つのページに HTML ファイルを 1 つ置くので、style.css や app.js は先にページの中に入れておきます。

よくある質問

HTML ファイルがページではなくコードで表示されるのはなぜ？

ブラウザ以外のアプリで開いたか、ファイルがページになっていないからです。テキストエディターは、もともとコードを見せるものです。名前が実は .txt で終わるファイルは、ブラウザでも文字で出ます。リッチテキストのエディターに貼ったコードは新しいページの文章として保存されることがあり、React のコンポーネントはそもそもページではありません。ブラウザで開き、ファイル名拡張子を表示し、コードが <!DOCTYPE html> で始まっているか確かめてください。

HTML のページが真っ白になるのはなぜ？

ページを描くスクリプトが動いていないからです。Chrome 155 でのテストでは、<script> タグの中でコードが切れていたとき（エラーは出ない）、ビルドしたアプリがパソコンの中から /assets/index.js を読み込んだとき、CDN の React がネットなしで読み込めなかったときに真っ白になりました。Ctrl + Shift + J（Mac は Cmd + Option + J）でエラーを見て、コードを </html> までコピーし直してください。

Google ドライブで HTML ファイルがコードで表示されるのはなぜ？

ドライブが見せているのはファイルのプレビューで、ブラウザで開いたページではないからです。Google ドライブのヘルプは、プレビューできるファイルの「マークアップ、コード」に .HTML を .CSS や .JS と並べ、プレビューは「元のファイルを簡易的に表示したもの」だとしています。HTML ファイルのプレビューがページを出すのかコードを出すのかは書かれておらず、ドライブや Gmail で開くテストもしていません。ファイルをダウンロードしてブラウザか HTML ビューアーで開くか、送った人にページのリンクを頼んでください。

ファイルが本当に .html か確かめるには？

ファイル名拡張子を表示します。Mac では「Finder」＞「設定」＞「詳細」で「すべてのファイル名拡張子を表示」を選びます。Windows 11 では、エクスプローラーで「表示」＞「表示」＞「ファイル名拡張子」を選びます。名前が .html.txt で終わっていたら、.html で終わるように変えます。中のコードは標準テキストなので、名前を変えるだけで足ります。

HTML ファイルのボタンが反応しないのはなぜ？

表示しているアプリがスクリプトを動かしていないか、ビューアーが止めるものをページが使っているからです。テストでは、iPhone と Mac のクイックルックは JavaScript を動かしませんでした。Convika の HTML ビューアーでは、alert()、prompt()、新しいウィンドウ、localStorage が止まります。同じテスト用のページをパソコンの中から Chrome 155 で開くと、どれも動きました。

HTML ファイルがテキストエディットやメモ帳で開いてしまうのはなぜ？

パソコンが .html ファイルをそのアプリで開く設定になっているからです。テキストエディットとメモ帳はテキストエディターなので、見せるのはコードか書式つきの文字で、動くページではありません。Mac では、ファイルを選んで「ファイル」＞「情報を見る」を選び、「このアプリケーションで開く」でブラウザを選んで「すべてを変更」をクリックします。今回だけなら、「このアプリケーションで開く」からブラウザを選びます。

コードしかないときも、ページを見られますか？

見られます。無料の HTML ビューアー を開き、「コードから」を選んで <!DOCTYPE html> から </html> まで全部貼り、「ページを表示する」を押します。ビューアーのアップロードのボタンを押さないかぎり、何もアップロードされません。知らない人から届いたコードなら、先に「スクリプトを動かす」のチェックを外してください。

出典

• Mac のテキストエディットで HTML 書類を扱う（Apple）（2026 年 10 月 27 日に確認）
• Mac でファイル名拡張子を表示する/非表示にする（Apple）（2026 年 10 月 27 日に確認）
• Windows の一般的なファイル名拡張子（Microsoft）（2026 年 10 月 27 日に確認）
• Mac でファイルを開くアプリを選択する（Apple）（2026 年 10 月 27 日に確認）
• Chrome のキーボード ショートカット（Google Chrome ヘルプ）（2026 年 10 月 27 日に確認）
• Chrome DevTools を開く（Chrome for Developers）（最終更新 2018 年 12 月 14 日、2026 年 10 月 27 日に確認）
• Google ドライブに保存できるファイル（Google ドライブ ヘルプ）（2026 年 10 月 27 日に確認）
• 理由: CORS リクエストが HTTP ではない（MDN）（最終更新 2025 年 12 月 4 日、2026 年 10 月 27 日に確認）
• JavaScript モジュール（MDN）（最終更新 2026 年 10 月 6 日、2026 年 10 月 27 日に確認）
• Parsing HTML documents, HTML Standard（WHATWG、英語）（最終更新 2026 年 10 月 26 日、2026 年 10 月 27 日に確認）