【入門編】contenteditable属性とテキスト要素の編集 – HTML実践ガイド

「Webページ上の文字を、まるでWordやメモ帳みたいに直接書き換えられたら面白くない？」

そんな風に思ったことはありませんか？実は、HTMLには魔法のような属性があるんです。それが今回紹介する`contenteditable`（コンテンツエディタブル）属性。

今回は、この魔法を使って`p`タグや`pre`タグを「編集可能な場所」に変えていく方法と、そこで待ち受けている「ブラウザごとのちょっとしたクセ」について、現場の知見を交えてお話ししますね。

—

HTMLで書かれたテキストは、通常「表示するだけ」のもの。でも、要素に `contenteditable=”true”` を付け加えるだけで、その場所が入力フォームに早変わりします。

まずは、試しに `

` タグにこの魔法をかけてみましょう。

ここをクリックすると、文章を自由に書き換えられます！

これだけで、ユーザーが直接テキストを編集できる仕組みが作れました。まるで、真っ白なキャンバスに絵を描くような感覚ですよね。

—

ここからが少し泥臭い話です。現場でエンジニアが頭を抱えるポイントの一つが、「改行したときに何が起きるか」です。

実は、`contenteditable` を有効にした要素の中で `Enter` キーを押したとき、ブラウザがどう振る舞うかは意外とバラバラなんです。

1. `

` や `

` で囲む派：新しい段落（pタグなど）を生成する。
2. `
` を挿入する派：単に改行タグを入れるだけ。

これ、なぜ困るのかというと、CSSでデザインを整えているときに「思っていたレイアウトと違う！」という事態を招くからです。

例えば、あなたが作ったブログの編集画面で、ユーザーが改行を繰り返したとき。あるブラウザでは「段落ごとに綺麗なマージン（余白）」がつくのに、別のブラウザでは「ギュッと詰まった改行」になってしまう。これでは、せっかくのデザインが泣いてしまいますよね。

これを解決するための「現場の知恵」を一つ教えます。

—

もし、本格的なリッチテキストエディタを作りたいのであれば、ブラウザの「おまかせ」にせず、自分たちで挙動を制御するのが基本です。ただ、学習中の段階では「ブラウザによって改行のルールが違うことがある」と知っておくだけで、つまずいた時に「ああ、あのアレか！」と冷静になれるはずです。

`pre`タグは「整形済みテキスト」を扱うためのもの。コードをそのまま表示する時によく使いますよね。ここに `contenteditable` を当てると、スペースや改行がそのまま反映されるので、プログラミングの学習ノートのようなものを作るには最適です。

function hello() {
  console.log("ここを書き換えて試してみてね！");
}

`pre`タグの中では、Enterキーを押しても段落が分かれるのではなく、純粋な「改行コード」として扱われることが多いため、`p`タグよりも「コードの編集」には向いています。

---

ここまで読んでみて、「なんだか奥が深そうだな」と感じたかもしれませんね。その通りです！

`contenteditable` を使って本格的なエディタを作るのは、プロの現場でも「かなり難易度が高い」部類に入ります。なぜなら、ブラウザごとに「Enterを押したときの挙動」や「コピペした時のタグの混入」がバラバラだからです。

でも、「まずは触ってみる」ことが大切。

そうやって自分なりに観察するだけで、あなたはもう立派なフロントエンドの卵です。まずは、上のコードをコピーして、ご自身の環境で遊んでみてください。思うようにいかなくて「なんだこれ！」と叫ぶ瞬間こそが、一番成長できる時間ですからね。

応援しています！何か疑問があれば、いつでもまた聞きに来てくださいね。