HTML ファイルを Chrome で開く方法（パソコン・iPhone・iPad・Android）

.html ファイルをダブルクリックしたら、メモ帳が開いた。Edge や Safari で開いた。iPad でタップしたら、ボタンの動かないプレビューが出た。どれも、ファイルではなく、開いたアプリの問題です。パソコンと Android なら、Chrome で開けばページとして表示されます。iPhone・iPad は、HTML ビューアーかリンクで開きます。

このガイドは、Chrome で開く操作だけを端末ごとにまとめます。端末ごとのくわしい事情は iPhone、Android、Chromebook のガイドに、Google ドライブに置いたファイルは Google ドライブのガイド にあります。Google・Microsoft・Apple のヘルプは、2026 年 11 月 4 日に日本語版で確かめました。

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

パソコンで HTML ファイルを Chrome で開く 4 つの手順

Windows と Mac の手順は、Microsoft・Apple・Google の日本語のヘルプから取りました。Mac では、2026 年 11 月 4 日に Chrome 156（macOS 26.5.2）で、ターミナルからの開き方を試しています。Finder の「このアプリケーションで開く」と「すべてを変更」、Windows の手順は試していません。

1. ファイル名が .html で終わっているか確かめる

page.html.txt のような名前のファイルは、どのアプリを選んでも文字として開きます。Microsoft のヘルプにも、拡張子によって「どのアプリケーションでそのファイルを開くことができるか」が判断されるとあります。Windows で拡張子を表示する方法は、Windows のガイド（英語）にあります。

2. 右クリックから Google Chrome を選ぶ

• Windows。 Microsoft のヘルプによると、ファイルを右クリックし、「[プログラムから開く]>[別のアプリを選択] を選択すると、コンピューター上のアプリの一覧が表示されます」。一覧から Google Chrome を選びます。
• Mac。 Apple のヘルプの手順は「Controlキーを押したままファイルをクリックし、「このアプリケーションで開く」を選択してから、アプリを選択します」。Google Chrome を選びます。Finder や Dock の Chrome のアイコンにファイルをドラッグしても開けます。

この方法で Chrome になるのは、その 1 回だけです。次にダブルクリックすると、いつも .html を開いているアプリで開きます。

3. Chrome で Ctrl + O（Mac は ⌘ + O）を押す

Chrome を開いた状態で Ctrl + O（Mac は ⌘ + O）を押し、ファイルを選びます。Google のショートカットの一覧では、Windows の Ctrl + O は「パソコンのファイルを Chrome で開く」、Mac の ⌘ + O は「パソコン上のファイルを Google Chrome で開く」です。

4. いつも Chrome で開くようにする

• Windows。 Microsoft のヘルプの手順です。設定アプリで「アプリ」>「既定のアプリ」を選び、検索バーに拡張子を入力して、出てきた結果からアプリを選びます。.html と入力して Google Chrome を選び、.htm も同じようにします。
• Mac。 Apple のヘルプの手順です。ファイルを選んで「ファイル」＞「情報を見る」を選び、「このアプリケーションで開く」のポップアップメニューで Google Chrome を選んで、「すべてを変更」をクリックします。

これで、どの .html ファイルもダブルクリックで Chrome で開きます。Chrome を「既定のブラウザ」にする設定は、リンクのためのものです。Google のヘルプには「Chrome を既定のブラウザに設定すると、リンクが自動的に Chrome で開きます」とあり、Windows 11 では、変更がファイルの種類に適用されたか「ファイルの種類またはリンクの種類の既定値を設定する」の下のリストで確かめるよう書かれています。

iPhone・iPad で HTML ファイルを Chrome で開くには

Google の Chrome ヘルプ（iPhone と iPad）には、ダウンロードしたファイルを「ファイル」に保存する方法と、Chrome のその他アイコン >「ダウンロード」で探す方法が載っています。けれど、端末に保存した .html ファイルを Chrome で開く手順はありません。Convika も、iPhone・iPad の Chrome では試していません。わかっていることは次のとおりです。学校の iPad で生徒に配るときは、生徒の iPad で HTML の教材を開くガイド を見てください。

• 「ファイル」アプリでタップすると、プレビューで開く。 Apple のヘルプには「ファイルを作成したアプリがインストールされていない場合は、クイックルックでファイルのプレビューが開きます」とあります。2026 年 10 月 6 日に iOS 26.3 のシミュレーターで試したところ、このプレビューでは JavaScript が動きませんでした。
• 「このアプリで開く」で、ほかのアプリを選べる。 Apple のヘルプでは、ファイルを長押しして「メニューから「このアプリで開く」を選択してから、オプションを選択します」。「情報を見る」の「常にこのアプリケーションで開く」で、開くアプリを決めておくこともできます。Chrome の入っていない iPad のシミュレーター（iPadOS 26.3）では、選べたのは「クイックルックでプレビュー」だけでした。Chrome を入れた iPhone や iPad で、Chrome が一覧に出るかは確かめていません。
• HTML ビューアーなら、ブラウザの中でページが動く。 無料の HTML ビューアー を開いて「HTML ファイルを選ぶ」をタップします。ファイルはサーバーに送られません。iPhone のガイド で試したのは Safari で、Chrome では試していません。心当たりのないファイルは、開く前に送った人に確かめ、「スクリプトを動かす」のチェックを外してから選んでください。
• リンクなら、Chrome を既定のブラウザにしておけば Chrome で開く。 Google のヘルプの手順は、Chrome でその他アイコン >「設定」>「既定のブラウザ」をタップし、「[設定] に移動...」>「デフォルトのブラウザアプリ」で Chrome を選びます（iOS 14 以降）。公開したページのリンクは、タップすると Chrome で開きます。

Android の Chrome で HTML ファイルを開く

2026 年 10 月 21 日と 22 日に、Android 16 のエミュレーター（日本語の表示、Chrome 133）で試しました。「ファイル」アプリで .html ファイルをタップすると「アプリで開く」の画面が出て、Chrome と「HTMLビューア」が並びました。Chrome はページ全体を動かし、アドレスは自分のスマホの中を指す content:// から始まりました。「HTMLビューア」は文字を出すだけで、JavaScript は動きませんでした。Chrome を選んで「1 回のみ」を押します。「常時」を押すと、そのアプリがいつも .html ファイルを開くようになります。試した結果と、Chrome が一覧に出ないときの対処は Android のガイド にまとめています。

Google の Chrome ヘルプ（Android）に書かれているのは、ダウンロードしたファイルの場所だけで、「デバイスにダウンロードしたすべてのファイルを表示するには、ファイルアプリを開きます」とあります。Files by Google、Galaxy などのメーカーのファイルアプリ、スマホの実機では試していません。Chrome が出ないときは、Chrome で HTML ビューアー を開いて「HTML ファイルを選ぶ」をタップします。心当たりのないファイルは送った人に確かめ、「スクリプトを動かす」のチェックを外してから選んでください。

Chromebook で HTML ファイルを Chrome で開く

Chromebook では、「ファイル」アプリで .html ファイルをダブルクリックすると、Chrome のタブで開きます。Chromium の 「ファイル」アプリのソースコード に、HTML はブラウザで開くと書かれています。Chrome で Ctrl + O を押す方法もあり、Google の Chromebook のショートカットの一覧では「ブラウザ内でファイルを開く」です。Chromebook の実機では試していません。学校の Chromebook で開けないときのことは、Chromebook のガイド にあります。

VS Code やターミナルから Chrome で開く

ターミナルや VS Code から開いても、Chrome で右クリックから開いたときと同じ file:/// のアドレスで開きます（Live Server を除きます）。

Mac のターミナル・Windows のコマンド プロンプト

Mac。 ターミナルでファイルのあるフォルダに移動して、次を実行します。

open -a "Google Chrome" page.html

macOS の open のマニュアルによると、-a は開くアプリを指定するオプションで、ファイル名はターミナルのいまのフォルダから見た場所として読まれます。2026 年 11 月 4 日に macOS 26.5.2 で試したところ、Chrome 156 で file:/// のアドレスとして開き、ページの中のスクリプトも動きました。

Windows。 コマンド プロンプトで、ファイルのあるフォルダから実行します。

start page.html
start chrome page.html

Microsoft Learn の start のページには、「ファイルの名前をコマンドとして入力することで、ファイルの関連付けを通じて実行可能でないファイルを実行できます」とあります。1 行目は、.html を開くアプリが Chrome になっているときだけ Chrome で開きます。2 行目は Chrome を名指しします。同じページに「start は、指定された実行可能ファイルを検索し」とあります。Windows では、どちらも試していません。

VS Code

VS Code の中のプレビューは Chrome ではありません。VS Code のドキュメントによると、ファイルを右クリックして Open in Integrated Browser を選ぶと、VS Code の中でページが表示されます。Chrome で開くには、次のどれかを使います。項目の名前は、VS Code の英語のドキュメントのものです。

• ファイルの場所を開く。 エクスプローラーでファイルを右クリックし、Windows は Reveal in File Explorer、macOS は Reveal in Finder を選びます。開いたフォルダから、手順 2 のとおり Chrome で開きます。
• VS Code のターミナルで開く。 フォルダを右クリックして Open in Integrated Terminal を選び、上のコマンドを実行します。
• 拡張機能の Live Server を使う。 Marketplace のページ によると、エクスプローラーで HTML ファイルを右クリックして「Open with Live Server」を選ぶか、ステータスバーの「Go Live」を押すと、ローカルのサーバーでページが開きます。Chrome で開かせるには、VS Code が設定を保存する settings.json に次の 1 行を足します（Preferences: Open User Settings (JSON) のコマンドで開けます）。Live Server の設定のページで、chrome は選べる値の 1 つです。

"liveServer.settings.CustomBrowser": "chrome"

Live Server の設定のページでは、ホストの初期値は 127.0.0.1、ポートは 5500 です。ページは file:/// ではなく、自分のパソコンの http:// のアドレスで開きます。VS Code と Live Server は試していません。ほかの人も開けるリンクにする方法は、VS Code から HTML ファイルを共有する方法（英語）にあります。

Google ドライブの HTML ファイルを Chrome で開く

ドライブのファイルは、いったんパソコンにダウンロードしてから、手順 2 か手順 3 で開きます。ドライブの共有リンクで相手に届くのはファイルそのもので、ページではありません。ドライブでの見え方と、人にページとして見せる方法は Google ドライブのガイド で説明しています。

Chrome で開いたのに崩れる・動かないとき

パソコンの中のファイルは file:/// のアドレスで開き、Chrome はそこから読み込むものの一部を止めます。2026 年 11 月 4 日に Chrome 156 で試したところ、ページの中に書いたスクリプトは動き、隣に置いた game.js を <script type="module"> で読み込む部分は動きませんでした。data.json の読み込みや、ビルドしたアプリの assets フォルダも止まった 10 月 24 日の表は、Mac のガイド（英語）にあります。

• ページではなくコードが出る、真っ白になる: HTML ファイルがコードのまま・真っ白で表示されるとき を見てください。
• 文字は出るのに、画像やデザインが出ない: 文字化けする・画像が出ないとき を見てください。ページが指す .css や画像のファイルは、HTML ファイルの隣に置くか、中に入れる必要があります。

原因を見るには、Chrome のデベロッパー ツールを開きます。Google の一覧では、Windows は Ctrl + Shift + J か F12、Mac は ⌘ + Option + I です。直し方はどのブラウザでも同じで、ページを作った AI に「CSS も JavaScript もデータも中に入れた、1 つの HTML ファイルにして」と頼むか、ページをネット上の URL に置きます。

Chrome で開いているページを HTML ファイルとして保存する

いま開いているページは、Ctrl + S（Mac は ⌘ + S）で保存できます。Google の一覧では「現在のページを保存するオプションを開く」です。保存先を選び、名前の最後を .html にします。

ページではなく HTML のコードが手元にあるなら、保存しなくても見られます。HTML ビューアー の「コードから」に貼り付けて、「ページを表示する」を押します。ビューアーで開けるのは、2 MB までの .html と .htm のファイルです。

Chrome で開く方法のくらべ

Chrome で開けるリンクにして送る

ファイルを送ると、相手の端末にはファイルとして届き、相手が上の手順をたどることになります。リンクなら、相手のブラウザで https:// の URL としてページが開きます。相手が Chrome を既定のブラウザにしていれば、Chrome で開きます。

Convika なら、次の 4 つです。

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

無料で公開したページは「一般公開」です。リンクを知っている人はだれでも開けて、検索結果や Convika のギャラリーに出ることがあります。どちらにも出さないなら、公開するときに「このページを開ける人」で「限定公開」（Pro）を選びます。限定公開でも、リンクを知っている人は開けます。

Convika は 1 つのページに HTML ファイルを 1 つ置くので、game.js や style.css は先にページの中に入れてください。ほかの無料の公開先とのくらべは HTML ファイルをリンクで共有する方法、心当たりのないファイルのことは HTML ファイルを開いても大丈夫か確かめる方法 にあります。

よくある質問

HTML ファイルを Chrome で開くには？

Windows はファイルを右クリックして「プログラムから開く」から Google Chrome を、Mac は Control キーを押したままクリックして「このアプリケーションで開く」から Google Chrome を選びます。Chrome で Ctrl + O（Mac は ⌘ + O）を押してファイルを選んでも開けます。Google の一覧では「パソコンのファイルを Chrome で開く」ショートカットです。ページは file:/// のアドレスで開きます。

いつも Chrome で HTML ファイルを開くようにするには？

Windows は設定アプリの「アプリ」>「既定のアプリ」で、検索バーに .html と入力して Google Chrome を選び、.htm も同じようにします。Mac はファイルを選んで「ファイル」＞「情報を見る」を開き、「このアプリケーションで開く」で Google Chrome を選んで「すべてを変更」をクリックします。Chrome を既定のブラウザにする設定で変わるのは、リンクを開くアプリです。

iPhone で HTML ファイルを Chrome で開くには？

Google の Chrome ヘルプには、iPhone に保存した .html ファイルを Chrome で開く手順がなく、Convika も iPhone の Chrome では試していません。「ファイル」アプリでタップするとクイックルックのプレビューになり、iOS 26.3 のシミュレーターでは JavaScript が動きませんでした。HTML ビューアーで開くか（試したのは Safari）、ページをリンクにします。Chrome で「設定」>「既定のブラウザ」から Chrome を既定のブラウザアプリにしておけば、リンクは Chrome で開きます。

iPad で HTML ファイルを Chrome で開くには？

iPhone と同じく、Google のヘルプに手順はなく、Convika も iPad の Chrome では試していません。Chrome の入っていない iPad のシミュレーター（iPadOS 26.3）では、「このアプリで開く」で選べたのは「クイックルックでプレビュー」だけで、プレビューでは JavaScript が動きませんでした。HTML ビューアーで開くか、ページをリンクにして、Chrome を既定のブラウザにしておきます。

Android の Chrome で HTML ファイルを開くには？

「ファイル」アプリでファイルをタップし、「アプリで開く」の画面で Chrome を選んで「1 回のみ」を押します。Android 16 のエミュレーター（Chrome 133）で試したところ、ページはスクリプトまで動き、アドレスはスマホの中を指す content:// でした。Chrome が出ないときは、Chrome で HTML ビューアーを開いてファイルを選びます。

VS Code から HTML ファイルを Chrome で開くには？

エクスプローラーでファイルを右クリックし、Reveal in File Explorer（Windows）か Reveal in Finder（macOS）でファイルの場所を開いて、そこから Chrome で開きます。Open in Integrated Terminal でターミナルを開き、コマンドで開く方法もあります。VS Code の Open in Integrated Browser は、VS Code の中で表示するもので、Chrome ではありません。拡張機能の Live Server なら、settings.json に "liveServer.settings.CustomBrowser": "chrome" を足すと Chrome で開きます。VS Code と Live Server は試していません。

Chrome でローカルの HTML ファイルが崩れる・動かないのはなぜ？

パソコンから開いたページは、すべてを読み込めないからです。2026 年 11 月 4 日に Chrome 156 で試したところ、ページの中に書いたスクリプトは動き、隣の game.js をモジュールで読み込む部分は止まりました。別のフォルダに残った画像や .css も出ません。AI に 1 つにまとめた HTML ファイルを頼むか、ページを公開してリンクで開きます。

Chrome で HTML ファイルとして保存するには？

Ctrl + S（Mac は ⌘ + S）を押し、名前の最後を .html にして保存します。Google の一覧では「現在のページを保存するオプションを開く」です。HTML のコードが手元にあるだけなら、HTML ビューアーに貼り付ければ保存せずに見られます。

出典

• Chrome のキーボード ショートカット（Google Chrome ヘルプ）（2026 年 11 月 4 日に確認）
• Chrome を既定のブラウザにする、パソコン（Google Chrome ヘルプ）（2026 年 11 月 4 日に確認）
• Chrome を既定のブラウザにする、iPhone と iPad（Google Chrome ヘルプ）（2026 年 11 月 4 日に確認）
• ファイルをダウンロードする、iPhone と iPad（Google Chrome ヘルプ）（2026 年 11 月 4 日に確認）
• ファイルをダウンロードする、Android（Google Chrome ヘルプ）（2026 年 11 月 4 日に確認）
• Chromebook のキーボード ショートカット（Chromebook ヘルプ）（2026 年 11 月 4 日に確認）
• ChromeOS の「ファイル」アプリの既定の動作、file_tasks.cc（Chromium のソースコード、英語）（main ブランチ、2026 年 11 月 4 日に確認）
• Windows で既定のアプリを変更する（Microsoft サポート）（2026 年 6 月 4 日更新、2026 年 11 月 4 日に確認）
• Windows の一般的なファイル名拡張子（Microsoft サポート）（2025 年 7 月 23 日更新、2026 年 11 月 4 日に確認）
• start（Microsoft Learn）（2026 年 4 月 16 日更新、2026 年 11 月 4 日に確認）
• Mac でファイルを開くアプリを選択する（Apple サポート）（2026 年 11 月 4 日に確認）
• iPhone の「ファイル」でファイルやフォルダを検索する/表示する（Apple サポート）（2026 年 11 月 4 日に確認）
• HTML in Visual Studio Code（VS Code のドキュメント、英語）（2026 年 11 月 4 日に確認）
• User interface（VS Code のドキュメント、英語）（2026 年 11 月 4 日に確認）
• Settings（VS Code のドキュメント、英語）（2026 年 11 月 4 日に確認）
• Live Server（Visual Studio Marketplace、英語）（バージョン 5.7.10、2026 年 11 月 4 日に確認）
• Live Server の設定（GitHub、英語）（2026 年 11 月 4 日に確認）
• この Mac の open のマニュアル（macOS 26.5.2 の man open、英語、2026 年 11 月 4 日に確認）