HTMLファイルの編集方法 — 実際にある選択肢

手元にHTMLファイルがあって、直したいのはたった一箇所。本来なら30秒で終わるはずです。でもコードを書かない人にとっては、たいていそうはいきません。しかもその理由がちょっと厄介なんです。

ファイルをダブルクリックすると、ブラウザには完成品のようなページが表示されて、どこに文字を打てばいいのか見当もつきません。まるでPDFです — 完成済み、封印済み、読むだけのもの、編集は自分の仕事じゃないかのように感じさせます。でもその印象こそが人を止めている原因で、実は間違っています。ファイルは何ひとつロックされていません。入口はいくつもあって、本当の問題はどれがあなたに合っているかだけです。

というわけで、選択肢を並べてみます。コードを直接編集する、大きなデスクトップソフトをインストールする、ブラウザのタブでオンラインエディタを使う、あるいはまさにこの用途のために作られた小さなツールを使う。どれが正解かは結局2つのことで決まります。HTMLを少し読めるかどうか、そしてどこまでインストールする気があるか、です。

手っ取り早くまとめると

• コードが書けるなら、テキストエディタやコードエディタでファイルを直接編集すればいい。自由度は一番高いけれど、生のタグと向き合うのは自分ひとり。
• 見たままの状態で編集したい？デスクトップソフトならできます。強力だけれどフルインストールが必要で、有料のものも多いです。
• オンラインエディタならインストール不要で、ブラウザのタブで動きます。便利ですが、必要以上に機能が詰め込まれてごちゃごちゃしているものも少なくありません。
• HTML Tweakはそのちょうど中間にあるシンプルな選択肢です。コード不要、登録不要、ブラウザでも手元のファイルとしても動き、どちらの場合でも今あるページをそのまま編集できます。
• どれを選ぶにしても、保存し直すときは.html.txtではなく.htmlのままにすること。ここに地雷が潜んでいます — 詳しくは後述します。

腕に覚えがあるなら、コードを直接いじればいい

一番自由度が高い方法は、実は一番古い方法でもあります。テキストエディタでファイルを開いて、自分の手で言葉を書き換えるやり方です。

どのパソコンにも最初から入っています。WindowsならNotepad、Macなら TextEdit。ファイルを右クリックして「プログラムから開く」を選び、ブラウザではなくエディタを選んで、タグとタグの間のテキストを書き換えて保存する。それだけです。本格的な作業になると、みんなVS Codeのようなちゃんとしたコードエディタに移ります — タグに色を付け、ミスを指摘し、フォルダ丸ごとのファイルを同時に扱えます。

ここは正直に言っておきたいのですが、本気でHTMLを学んでいる人や、スタイルシートやスクリプトが十数個のファイルに分かれた本格的なプロジェクトを抱えている人にとっては、これが正しい居場所で、この先に出てくるどの方法もこれには勝てません。完全なコントロールこそが、この方法の存在意義そのものだからです。

代償は、ずっと生のコードを見続けなければならないことです。括弧をひとつ消しただけで、本当に見つけにくい場所でページが壊れます。すでにタグを読めるなら、これは十分割に合う取引です。読めないなら、たった一語直すためにさらけ出された配線が多すぎます。

ダウンロードしてインストールする、あの大きなソフト

コードには一切触れたくない？その場合の定番の答えが、コードの代わりにページそのものを見せてくれるデスクトップエディタです — ビジュアルエディタ、あるいはWYSIWYG（見たままが得られる、の意味）と呼ばれるものです。見出しをクリックして、新しい文言を打てば、その場で変わるのが見えます。

本当に高機能なものもあり、中にはシンプルなエディタというより本格的なウェブデザインスイートに近いものもあります。でもその分、代償は二重にかかります。ひとつは重さ — ダウンロードしてインストールして、アップデートし続けなければならない、れっきとしたアプリケーションです。もうひとつはお金であることも多く、かなりの割合が有料か、サブスクリプションへの加入を促してきます。サイト全体を作り直すなら、それだけの価値はあるかもしれません。1ページの電話番号を直すだけなら、大ハンマーで釘を打つようなものです。

あるいはブラウザのタブだけで済ませる

次に、オンラインエディタという選択肢があります。インストールは一切不要です — それ自体がウェブページなのですから。開いて、ファイルを開いて、編集して、保存する。借り物のパソコンでも動きますし、事前に何かを準備する必要もありません。

ただ、多くのオンラインエディタには落とし穴があります。ごちゃごちゃしていることです。シンプルな入力欄を期待して開いたはずが、実際にはパネルやツールバー、会員登録の壁、プレビュー画面とコード画面がスペースを取り合っている光景が待っています。機能は十分にあります。でも1行直しに来ただけなのに、気づけば操作画面の勉強をさせられています。

オンラインツールがファイルをどこかへこっそり送っているのではないか、という当然の疑問もあります。でも本来、そうである必要はありません。きちんと作られたブラウザエディタは、ブラウザ自身のファイルアクセス機能を使ってローカルでファイルを開くだけで、どこにも送信しません — ただし、本当にそう作られているかどうかは信じるしかない部分でもあります。

結局たどり着いた場所

ここは正直に言います。自分が作ったツールの話だからです。まさにこの選択に疲れてしまって、小さなものを自分で作りました。名前はHTML Tweak。あのシンプルな中間地点を目指した、自分なりの挑戦です。

無料のビジュアルエディタです。既存の.htmlファイルを開いて、ページ上をクリックするだけで変更できます — コードは一切要りません。レイアウトを固定するテキスト専用モードもあるので、タグを見たこともない人でも文章だけを書き換えられて、デザインを物理的に壊しようがありません。コードも見たい？すぐそこにあって、ビジュアル側と常に同期しています。

自分が一番こだわったのは、オンラインかオフラインかを選ばせない、という点です。ブラウザ上で無料で動き、一度読み込めばそのあとはオフラインでも動き続けます。単体のファイルとしてダウンロードして、手元に置いておくこともできます — インストーラーは要らず、ダブルクリックするだけのファイルです。そしてどちらの場合も、登録は求められません — アカウントもメールアドレスも、オンラインでもオフラインでも不要です。あちこちで会員登録の壁に当たってきた身としては、それだけでもかなりホッとします。どちらの方法でも、今あるページをそのまま編集できます。ChromeやEdgeなら変更をそのファイルに直接保存し、他のブラウザでは代わりに編集済みのコピーがダウンロードされます。英語が母語でなくても大丈夫、5つの言語に対応しています。

逆にできないことも先に言っておきます。あとで気づかれるより、自分から言うほうがいいので。大規模なReactやNextのプロジェクトを、たくさんのファイルごと管理することはできません。1つのHTMLファイルを開いて、それを仕上げる手伝いをするだけです。本格的なコードベースを扱うなら、上に戻ってコードエディタを使ってください。適材適所、ということです。

保存ひとつで、ページが静かにテキストファイルに化ける話

これは残しておく価値があったので、そのまま残しました。

保存には気をつけてください。Notepadでindex.htmlを編集して「名前を付けて保存」を押すと、気づかないうちにindex.html.txtになってしまうことがあります — こうなるとブラウザはページとして扱ってくれません。ダイアログはデフォルトでテキスト文書として保存する設定になっていて、勝手に.txtをくっつけてくるのです。抜け道は2つ。保存前に「ファイルの種類」を「すべてのファイル」にするか、ファイル名を"index.html"のように引用符で囲んで強制的に通すかです。フォルダの表示設定でファイル名拡張子をオンにしておくと、早めに気づけます。自分の.htmlファイルに直接保存し直してくれるエディタなら、この面倒ごと自体が起きません。

本当に効いてくる分かれ道

方法	向いているとき	コードは必要？	編集しながらページを見られる	インストール
テキスト・コードエディタ	HTMLを学習中、または本格的な複数ファイルのプロジェクト	必要	見られない — プレビューは別	良いものが必要なことが多い
デスクトップのビジュアルエディタ	大がかりなリデザイン、重さは気にしない	不要	見られる	必要、しかも有料なことが多い
オンラインエディタ	どのパソコンでもサッと編集	ツールによる	ツールによる	不要
HTML Tweak	コードを書かずに手元のページを直したいとき	不要	見られる	任意 — ブラウザか、ファイル1つ

こう整理してみると、実は2つの質問だけで決まる地図なんです。「HTMLを読めるか」で最初の行とそれ以外が分かれ、「どこまでインストールしたいか」で残りが分かれます。

目の前にあるのが、すでに手元にあるページと、ちょっと直したいだけの変更なら、HTML Tweakで開いてさっさと片付けてしまいましょう。どこにもアップロードされません。