レイアウトを崩さずにHTMLのテキストを変える方法

少し前、友人のランディングページを開きました。誤字をひとつ直すためです。WYSIWYG の入力欄に、抜けていた一文字を打ち込んで、保存する——すると、上のきれいな二段組みが、みすぼらしい一本の帯にぺしゃんと折りたたまれました。たった一文字。ヒーローエリアまるごと、消えました。

というわけで、先に結論を。レイアウトを崩さずに HTML のテキストを変えるなら、テキスト専用モードで編集します——言葉は書き換えられるのに、タグもクラスも構造もロックされたまま。文字はその場で変わります。まわりに何かが足されたり、動いたり、消えたりはしない。だからレイアウトには、ずれる先がありません。

このモードには名前があり、うまくいく理由があります。面白いのは理由のほうです——それが見えたとたん、「このページ、怖くて触れない」という気持ちが、すっと消えるからです。

触っていないと誓えるのに、なぜレイアウトが動くのか

たいていの人が、これを教わりません。多くのビジュアルエディタは、テキストを変えるだけではありません。あなたの HTML を書き直します。

リッチテキストや WYSIWYG の入力欄で編集すると、エディタはしばしばページを自前のモデルに読み込み、保存のときに自分のやり方で書き戻します。この往復で、事故が起きます。知らないクラスを落とす。<h2> を <p> に差し替える——それが自分の「作法」だからです。二つの要素を一つにまとめたり、ゴミだと思った空のラッパーをこっそり消したり。

そしてあなたのレイアウトは、まさにそこに寄りかかっていました。

たとえば見出しが <h2 class="hero-title"> だとします。hero-title というクラスこそ、あなたの CSS がサイズや余白、それが収まるグリッドの列を決めるのに使っているものです。合わないエディタで言葉を打ち直すと、クラスが欠けて戻ってくる——あるいはタグそのものが変わっている——そうなると CSS ルールは、もう何にも当たりません。テキストはまだあります。ただ、それを支えていたものを、すべて失っただけ。一文字の欠けのために、私が目の前で見たのが、この崩落でした。

ブラウザで直に編集するのも、同じ落とし穴です。構造に触れてよくなった瞬間、構造を壊せてしまう——たいていは意図せず、たいていは保存するまで気づかないまま。

「構造をロックする」とは、実際に何をロックするのか

テキスト専用モードは、話をまるごとひっくり返します。ページ全体を編集させる代わりに、言葉だけを手渡すのです。

タグは凍ったまま。クラスも、id も、属性も、要素どうしが入れ子になっている形も——ぜんぶロック。タグの間の文字は変えられます。タグそのものは、変えることも、足すことも、消すこともできません。だから CSS がぶら下がっているクラスは、あなたが終えたあとも残っています。そもそも消す手立てが、なかったからです。

お店の棚にある値札ホルダーを思い浮かべてください。テキスト専用モードは、中の値札の紙を抜いて、新しい一枚を差し込ませてくれます。でも、ホルダーを棚から外すことも、別の穴を開けることも、台ごと持ち去ることも、させません。値段は変わる。それを支えているものは、変わらない。これがすべてで、だからレイアウトは動きようがない——構造は何も変わっていないので、組み直すものが、ないのです。

これは、HTML を広くビジュアルに編集するのとは、別の仕事です。そちらでは、ブロックを動かしたり、スタイルを付け直したりもできます。テキスト専用は、その中の狭くて安全な一切れ——言葉だけ、あとはすべて動かさずに。

では、言葉を変えて、デザインを保つには

どんなツールでも、いくつかの習慣が安全の大半を担ってくれます。

手元にある唯一の版ではなく、ファイルのコピーで作業する。ものの形ではなく、言い回しを変える。確定する前にプレビューする。そして Word や Google ドキュメントからテキストを貼るなら、プレーンテキストで貼る——あれらのアプリは、あなたのページとけんかする隠しマークアップを、こっそり連れてきます。

テキスト専用ツールなら、安全な部分は最初から組み込まれています。.html ファイルを開いて、テキスト専用モードをオンにし、その行をクリックして、打つ。モードそのものがガードレールです。やろうとしても構造は壊せません。テキスト専用がオンのあいだ、構造は編集できないからです。

本当に構造を変えたくなったとき——セクションを動かす、新しいブロックを足す、カードのスタイルを変える——それは別の仕事で、テキスト専用を抜けて、コード表示か完全なビジュアル表示に切り替えてやります。自分がそのどちらをしているのかが分かれば、勝負は半分ついています。

タグを見たこともない人に、ページを手渡す

ロックされた構造が、真価を発揮するのはここです。

同僚に、あるいはクライアントに、文章を更新してもらおうとページを手渡す場面を思い浮かべてください。価格を直し、見出しを新しくし、名前を一つ正してほしい。彼らがうっかりずらしたレイアウトを直すのに、金曜の午後をまるごと使う——そんなのはごめんです。

テキスト専用モードをオンにして、それを渡します。彼らに見えるのは本物のページで、山のような山括弧ではありません。段落をクリックして、打ち直して、おしまい。クラスを消したり <div> を削ったりできるキーは、一つもありません。手の届くところに、ないからです。「コードを書けない人にサイトを触らせる」のが怖いのは、本人にも分からないものを壊しかねないから。その力を取り上げれば、怖さも一緒に消えます。

どのツールを手渡すか迷っているなら、主な 無料の HTML エディタ の、正直な得失を別のところで並べておきました。すでにあるページへの、純粋なテキスト修正なら、テキスト専用は、人に渡せるいちばん危なくないものです。

開いてから保存まで、実際の手順

私が作っている無料ツール、HTML Tweak で、通しでやってみます。ブラウザで動き、オフラインの単一ファイルとしても動きます——インストールも、登録も、なし。

1. ページを開く。 HTML Tweak へ行って、.html ファイルを開きます。何もアップロードされません——ファイルはあなたのブラウザ、あなたのマシンに留まります。
2. テキスト専用モードをオンにする。 これでタグ、クラス、レイアウトがロックされ、編集できるのは言葉だけになります。
3. 変えたいテキストをクリックする。 見出し、ひとつの段落、ボタンのラベル、価格。
4. 打ち直す。 言葉を変える。まわりのタグは、びくともしません。
5. ページをプレビューする。 余白もレイアウトも見た目は同じ。構造が何も変わっていないからです。
6. 保存する。 Chrome か Edge なら、そのままファイルへ書き戻します。ほかのブラウザなら、編集済みのコピーを、手元用にダウンロードします。

それだけ。一分の作業で、デザインはどこも危険にさらされません。

ロックしても、なお救われないとき

「それでも崩れた」というメッセージのほとんどは、ほんの一握りの小さなミスから来ています。

• ファイルの唯一のコピーを編集する。 始める前に、原本をどこか安全な場所へ。
• Word やドキュメントから直に貼る。 隠れた書式を引きずってきます——代わりにプレーンテキストで貼りましょう。
• モードと戦う。 テキスト専用がオンのままセクションを動かそうとすると、動かなく感じます。そう作ってあるからです。それは構造の変更で、テキストの変更ではありません。
• どのブラウザもその場で保存できると思い込む。 ファイルへ直接書き戻すのは Chrome と Edge だけ。ほかはダウンロードしたコピーをくれます。それで問題ありません——どちらを受け取ったか、分かってさえいれば。

それから、はっきり言っておくべき境界がひとつ。テキスト専用モードは、すでに手元にあるページの、中身と言い回しのためのものです。構造の作り直しのためではありませんし、HTML Tweak は複数ファイルの React や Next プロジェクトを管理する道具でもありません——一つのページを開いて、それを仕上げる手伝いをします。あなたの仕事が「サイトの文言を書き直す」なら、ぴったり。「サイトを設計しなおす」なら、この道具ではありません。

一行を直したいだけなのに、それがページの残りに何をするか怖い——もしそれだけのことなら、テキスト専用モードでファイルを開いて、言葉を変えてください。デザインは、あなたが置いたそのままの場所にとどまります。