ブラウザでHTMLファイルを開いて編集する方法

.html ファイルをダブルクリックすると、Chromeで開いて、出来上がったウェブページのように見えます。だから、そのままクリックして誤字をここで直せそうな気がする。直せません——少なくとも、残る形では。ファイルをブラウザで開くというのは、それを表示するだけのこと。ブラウザ内蔵のツールで変えたものは何であれメモリの中に生きていて、リロードした瞬間に消えます。ファイルを本当に編集して、その変更を残すには、ディスクからファイルを開いて、あなたの変更をそこへ書き戻すエディタが要ります。

この落とし穴は、思っているより多くの人をつまずかせます。誰かがページを渡してくる、あるいはAIが吐き出す。それが一つの .html ファイルとしてパソコンに届く。開いてみると、一行を除いて全部いい感じで、直感のすべてが「ここで直せばいい」と言う。ブラウザは、三十秒くらいはそう信じさせてくれます。

ここからは、実際に何が起きているのか、そしてリロードに耐える変更をどう手に入れるかの話です。

「ブラウザで開く」って、そもそも何をしている？

ローカルの .html ファイルを開くと、ブラウザはそれを読み、メモリの中にページを組み立て、画面に描きます。やっていることはそれだけ。ブラウザはビューアです。アドレスバーに file:// で始まる何かが出るのは、「これはあなたのディスクから読んでいます、しかも読んでいるだけです」というブラウザの言い方です。

ブラウザの窓は、ガラス越しの手紙です。一字一句、読める。でも、ガラスに書きなぐっても手紙そのものは書き直せない——たとえ書けたとしても、引き出しの中の原本は変わりません。

編集は、別の仕事です。編集とは、ディスク上のファイルが実際に変わること。ただのブラウザの窓は、それ単体ではそれをしません。

DevToolsでの変更が、なぜ消えるのか

これがいちばん人を騙します。本当に編集しているように見えるので。

右クリック、検証、これでDevToolsの中です。Elementsパネルでは、どんなテキストもダブルクリックして打ち直せる。色を変える。まるごと一区画を消す。ページは目の前で、その場で更新されます。魔法のよう。保存された気がする。

されていません。その変更は、ブラウザがメモリに抱えているページの生きたコピーを書き換えているだけで、ディスク上のファイルではありません。リロードを押すと、ブラウザは元のファイルからページを組み直します——その元ファイルは、いまの一切を知りません。あなたの変更は消えています。警告もなし、「未保存の変更」というお節介もなし。ただ、消える。

DevToolsには高度な一角があります——Sourcesパネルの、workspaceフォルダやLocal Overrides——それは確かにディスクへ書き込めます。でもそれは、サイトをデバッグする開発者向けの設定というひと仕事で、あなたが欲しい素早い直しではありません。リロードのあと変更が出てこないのはなぜだろう、と思ったことがあるなら、まずこれが理由です。

だからDevToolsは「こうしたらどう見えるか」を試すには良いメモ帳。保存の手段ではありません。

本当にあなたのファイルへ書き込む部分

ブラウザがあなたのパソコン上のファイルを変えるには、ディスクに手を伸ばして書き込む許可が要ります。現代のChromium系ブラウザには、まさにそれがある。File System Access API と呼ばれるものを通じてです。「ユーザーが選んだファイルを開かせて、あとでその同じファイルへ保存し直させて」とウェブページが頼めるようにする配管が、これです。

その上に建てたエディタは、こう動きます。開くをクリックすると、ブラウザがいつものファイル選択画面を出し、あなたは自分の .html を選ぶ。エディタはそれを読み、本物のページを見せる。あなたが変更を加える。保存をクリックすると、開いたのと同じファイルへ直接書き戻します——同じ名前、同じ場所、二つ目のコピーはなし。

この最後のところが、すべての肝です。「名前を付けて保存」なし、ダウンロードフォルダの掘り返しなし、そっくりな三つのファイルのどれが本物か悩むこともなし。開いて、直して、保存して、おしまい。

HTML Tweak は、これを軸に私が作ったツールなので、中立ではなく、正直に手の内を明かしていると受け取ってください。ローカルの .html を開き、ページをクリックして、あるいはコードをいじって編集させ、ファイルへ保存し直します。ブラウザのタブで動き、無料、登録不要。ファイルがあなたのパソコンを離れることはありません——ブラウザがローカルでエディタに手渡すだけで、サーバーには何もアップロードされません。

chromeとedgeは保存できる。ほかはコピーを手渡してくる。

さて、正直な落とし穴を。ここが肝心なので。

ローカルのファイルへの直接保存が効くのは、Chromium系ブラウザだけ——Chrome、Edge、それにOperaのような親戚。File System Access API が住んでいるのがそこです。FirefoxとSafariは、その書き戻しの部分をまだ出していません。

だからFirefoxやSafariでは、良いエディタはただ失敗するのではありません。一歩下がる。あなたの原本へ書き込む代わりに、編集済みのコピーをダウンロードする——変わったページがダウンロードフォルダに落ち、あなたが自分でそれを原本と入れ替えます。ひと手間、増える。少しだけ、片づかない。でも変更はちゃんと手に入るし、ファイルは相変わらずサーバーに触れません。

正直なおすすめ——クリックして保存、で終わる感触が欲しいなら、ChromeかEdgeでやること。FirefoxやSafariでは、ダウンロードの道を見込んでおいてください。

最初から最後まで、やってみる

ChromeかEdgeで、すでに手元にある一つのHTMLファイルに対して、まるごとの流れはこうです。

1. エディタのページを開く。HTML Tweak なら /html-editor にあるツールで、インストールは何もいりません。
2. 開くをクリックして、ブラウザのファイル選択画面で .html ファイルを選ぶ。
3. エディタがあなたの実際のページを見せます。変えたいテキストや要素をクリックして直す——あるいは好みでコード側に切り替える。
4. 保存をクリック。初回だけ、ブラウザが「このページにそのファイルへの保存を許可しますか」と尋ねるかもしれません。はい、と答える。
5. それで完了。変更は元のファイルへ書き戻されています。そのファイルをブラウザでそのまま開き直して、残ったか確かめましょう。

FirefoxやSafariでは、ステップ4が「編集済みのファイルをダウンロード」になり、ステップ5が「古いファイルをダウンロードしたものと置き換える」になります。

保存したつもりの変更を失う、四つの道

何度も見かけるものを、いくつか。

DevToolsで編集して、それからリロード。 上で触れましたが、「あれ、私の変更どこ行った」の第一の原因です。DevToolsの変更は、あの開発者向けワークスペースを組まない限り、保存されていません。

ファイルから「ページを名前を付けて保存」を使う。 それが保存するのは、描画されたページのスナップショットで、たいていは新しいファイルと素材のフォルダ一式です。見ているページを保管するためのもので、自分のファイルをきれいに編集するためではありません。コピーの山ができあがります。

FirefoxやSafariがその場で保存してくれると当てにする。 今日のところ、してくれません。返ってくるのはダウンロードです。壊れてはいない——ただ、違うだけ。

最後に .txt ファイルになってしまう。 プレーンテキストエディタでHTMLを編集して、うっかり保存すると、末尾にこっそり .txt を足すエディタがあって、ページがページとして描画されなくなります。ブラウザ上のHTMLエディタはこれを避けます。最初から .html ファイルを相手にしていると分かっているからです。

はっきり言っておきたい境界が一つ。ここまでの話はすべて、単一で自己完結したHTMLファイルについてです——AIから、メールから、取っておいた古いページから受け取る、あの類のもの。複数ファイルのサイトや、ReactやNextのプロジェクトを扱うやり方ではありません。仕事が違えば、道具も違う。HTMLファイルを編集するあらゆる方法の、テキストも、ビジュアルも、オフラインも含めた地図がまるごと欲しいなら、それはそれで、もっと長い話です。

さっと試す方法

それで——いまChromeかEdge、開いていますか？HTML Tweak は、あなたの変更をそのままファイルへ書き戻します。FirefoxやSafariでは代わりにダウンロードになりますが、どちらにしても、一分もかからずにその変更はあなたのものです。