コードを書かずにHTMLをビジュアルで編集する方法

「HTMLエディタ」という言葉は、ひとつで背負いすぎています。少なくとも五種類の違う道具が、同じこの名前を名乗っていて、しかも同じ仕事をしていない——だから「HTMLをどう編集するの?」への答えは、あなたがどれを指しているかで、まるごと変わります。でも、手元にあるのが、直したいところが一つだけの完成したページなら、答えは短くて済みます。そのページ、ビジュアルで直せます。開いて、テキストか画像をクリックして、変更を打ち込む。読むべきタグはなく、下のコードは元あった場所に、そのまま残ります。

それが、ビジュアルエディタのすることです。WYSIWYG と呼ばれることもあります——what you see is what you get、見たままが手に入る、という意味。コードではなく、実際にレンダリングされたページのほうを見せてくれて、クリックして変える。いいエディタなら、作業のあいだ、下のHTMLをきちんと保ったまま同期させてくれます。小さな陶芸工房をやっている友人が、あるクラスの時間を18時から19時に変えたいだけ、ということがありました。ファイルを開いてはみたものの、数百行の <div> と <span> にぶつかって、その数字をどこに置けばいいのか、見当たらない。まさにそのための道具です。すでにあるページに、ちょっとした内容と見た目の直しを入れる——それだけ。

先に一つ、はっきりさせておきます。これは、すでに持っている一枚のページで、言葉を変える、リンクを差し替える、画像を入れ替える、色を少しいじる——そのための正しい道具です。サイトを一から作り直したり、複数ファイルの React や Next のプロジェクトと格闘したりするための道具ではありません。この線を覚えておけば、あとは楽になります。

「ビジュアルで編集する」って、ほんとうは何のこと

印刷済みのポスターの、一語の間違いを直すのに、やり方は二つあります。レイアウトソフトで全体を作り直して、どの枠も書体も一つずつ合わせ直す。それとも、ペンのキャップを外して、その一語だけ書き換える。ビジュアルなHTML編集は、ペンのほうです。

中を覗くと、ウェブページはタグの積み重ねです——あなたの内容にくるりと巻かれた小さなラベルで、ブラウザにこう伝えます。これは見出し、これは段落、これはボタン、と。コードエディタは、あなたをラベルの層で作業させます。ビジュアルエディタは、そのラベルを隠して、内容の層で作業させてくれる——文書を直すときと同じ感覚で。ページを見る。直したいところをクリックする。打つ。

仕掛けは、じつはこれで全部です。タグはどこにも行きません。ただ、もう見なくてよくなる。それだけ。

「エディタ」という言葉をかぶった、五つの別物

人がつまずくのは、ここです。「HTMLエディタ」という名前が、同じ仕事をしない少なくとも五種類の道具に、べったり貼りついているから。以前、まる一日つぶして、ある人を手伝ったことがあります——その人は、すでに完成して別の場所に置いてあるページの、キャプションを一つ変えたくて、サイトビルダーを開いていました。棚を間違えていたわけです。

これは何か	編集するのは	見えるのは	あなたの .html ファイルに保存される?	向いているのは
ビジュアルHTMLエディタ	あなたの本物の .html ファイル、ページをクリックして	ページ	はい	すでにあるページの手直し、コードなしで
WYSIWYG のリッチテキスト欄(CMS やアプリの中)	欄の中の、ひとつの内容ブロック	その欄の表示	いいえ——アプリのデータベースへ	記事やメール、コメントを書く
サイトビルダー(Wix、Squarespace、Webflow)	彼らのプラットフォーム内のサイト	ページ	持ち出せるファイルはなし——彼らのホスティング上	新しいサイトを一から作る
コードエディタ(VS Code、Notepad)	むき出しのタグ	タグ	はい	構造をきっちり、HTMLを学ぶ
ブラウザの DevTools	ブラウザ内の一時的なコピー	ページ	いいえ——再読み込みで消える	調べる・試す

工房のページにとって効いてくるのは、一行目です。ビジュアルエディタが開くのは実際のファイルで、ページをクリックすれば、そのファイルが変わる。これは、あなたの CMS の中のリッチテキスト欄とは違います——あれが編集するのは内容のひと切れで、保存先はデータベース、誰かに手渡せるファイルではありません。そして、サイトビルダーとはもっと違う——そこでは持ち出せるファイルなんて、そもそも手に入らない。ページは彼らのプラットフォームの上で生きていて、それを「編集する」とは、そこで組み直すこと。

DevTools には、この先で専用の注意書きを用意しています。

クリックで、テキストとリンクと画像を変える

いちばんよく必要になる三つは、テキスト、リンク、画像です。三つとも、やり方は同じ。

テキストは楽なほうです。その文をクリックすると、打ち込める何かに変わる——小さな枠のように。言葉を変えて、外側をクリックすれば、完了。見出しは見出しのまま、大きさも色も動きません——タグの中の言葉を入れ替えただけで、タグそのものは触っていない。

リンクは二つの部分でできていて、ここで人はすべります。目に見える言葉と、その指し示す先のアドレス。ビジュアルエディタなら、どちらも変えられます——見える文字を打ち直すか、リンクを開いて新しいURLを貼るか。「今すぐ予約」と書いてあるのに、去年のフォームをそっと指したままのボタン——もし覚えがあるなら、それを十秒ほどで直す方法が、これです。

画像は、ページを新しいファイルへ向け直すことで入れ替わります。その画像をクリックして、差し替えを選ぶと、ページが更新される。レイアウトはたいてい崩れません。その場所は、もともと画像のサイズに合わせて空けてあったから。ここが、意外に思われるところ。あなたは、すでにある額に新しい写真を落とし込んでいるだけで、額を作り直しているわけではありません。

下のコードを、ぐちゃぐちゃにしない?

これこそが本当の不安で、もっともな不安です。少し古いビジュアル系の道具の多くは、まさにこれで悪名高かった——一語変えただけで、こっそりページの半分を、ゴミタグのごった煮に書き換えてしまう。だから正直に言えば、道具しだいです。

いいビジュアルエディタは、元のマークアップをそのまま保って、あなたが触ったところだけに触れます。**内容を変える、構造は変えない。**さらに一歩進んで、レイアウトを丸ごとロックするテキスト専用モードを持つものもあります——だからページのどの言葉も書き換えられるのに、物理的に、何一つ動かせないし壊せない。ファイルを、それが不安な誰かに手渡すとき、まさにほしいのがこれです。HTML Tweak にはそのモードがあって、いちばんよく聞く要望でもあります。

危うくなるのは、貼り付けです。Word や Google Docs から段落をコピーすると、言葉と一緒に、目に見えない書式タグまで引きずり込むことがよくあります。道具が用意しているなら、プレーンテキストで貼る——それで大半は避けられます。

手順どおり、やってみる

.html ファイルが一つあって、直したいところが一箇所、としましょう。全体は、こんな感じです。

1. ビジュアルエディタでファイルを開く。HTML Tweak なら、ファイルをページにドラッグするか、「開く」を使う——サーバーには何もアップロードされず、ファイルはただ、あなたのブラウザの中に読み込まれます。
2. **レンダリングされたページの上で、変えたいものを見つける。**コードの中ではありません。誰もがそうするように、ただページを眺めればいい。
3. **クリックする。**テキストは編集できるようになり、リンクはアドレスを差し出し、画像は差し替え口を差し出します。
4. **変更して、外側をクリックして確定する。**プレビューを見て、見た目が合っているか確かめる。
5. **保存する。**Chrome か Edge なら、エディタはあなたの元のファイルへ直接書き戻します。ほかのブラウザなら、編集済みのコピーをダウンロードして、手元に残せます。

それだけ。インストールも、アカウントもなし。工房のページは、ぜんぶで一分ほど——そのうちの大半は、友人が19時で本当に決まりかどうかを、迷っている時間でした。

みんながはまる、いくつかの落とし穴

何度も、何度も出てくるものが、いくつかあります。

ブラウザの DevTools で編集して、それが残ると思い込む。残りません。DevTools が見せるのは、生きた、使い捨てのコピー——ページを再読み込みすれば、変更は一つ残らず消えます。あなたのファイルには、はじめから書き込んでいなかったから。あれはページを突ついてみるためのもので、保存するためのものではありません。

すでにあるページを一枚直すのに、サイトビルダーに手を伸ばす。ページがファイルなら、ビルダーは、たった一行変えるためだけに、自分のプラットフォームの中で組み直させます。画鋲を打つのに、大ハンマー。

ビジュアル編集で、複雑なレイアウトを組み替えられると思い込む。これは内容と小さな見た目の変更のためのもの——言葉、リンク、画像、色、少しの余白。グリッドを解体して構造を組み直すのは、やはりコードの仕事です——そうでないふりをしても仕方ない。ファイルを変えるやり方の、もっと詳しい地図がほしいなら、HTMLファイルを編集する方法に並べておきましたし、実際の道具は無料で使えるおすすめのHTMLエディタで一つずつ比べています。

それから、うっかりファイルを .txt で保存してしまう——これが、ページがページとして働くのを、静かに止めてしまいます。あなたのエディタが元のファイルへ書き戻してくれるなら、そんなことは一度も気にせずに済みます。

一語、一つのリンク、一枚の画像——おかしいのがそれだけなら、コードを開き直さないこと。HTML Tweak でクリックして、直しが、あなたの手の動きに合わせてページに乗るのを、見てください。