「ここ、書き換えられたらいいのに！」を叶える魔法の属性：contenteditable入門
Webサイトを作っていると、「ユーザーが自分の名前やメモをその場で直接書き込めたら、もっと便利なのに！」と思うこと、ありませんか？
例えば、ToDoリストや、自分だけのメモ帳アプリ。通常、HTMLの文字は私たち制作者がコードを書き換えない限り変わりませんよね。でも、実はHTMLには「ここ、ユーザーが自由に入力していいですよ！」とブラウザに伝える魔法の属性があるんです。
それが今回紹介する `contenteditable` です。
1. 「contenteditable」ってなに？
一言でいうと、「HTMLの要素を、テキストボックスに変身させる魔法」です。
通常、`` や `
「入力フォーム（``タグ）を使えばいいのでは？」と思うかもしれません。確かにそうですが、`input`タグはデザインがカチカチで、装飾を工夫するのが少し大変なこともあります。一方で、`contenteditable` なら、今あるデザインをそのまま活かして「編集モード」に切り替えられるのが大きな強みなんです。
2. 早速やってみよう！
まずは、一番シンプルな形で試してみましょう。HTMLにたった一行、属性を書き加えるだけです。
ここはただの文章ですが、下の行は違います。
ここをクリックして、自由に書き換えてみて！
これだけで、ブラウザ上で文字を消したり、書き足したりできるようになります。まるでメモ帳を使っているような感覚ですよね。
3. 入力した内容を「保存」する工夫
ただ書き換えるだけだと、ページをリロード（再読み込み）した瞬間に、書いた文字は消えてしまいます。「せっかく書いたのに！」とならないように、JavaScriptを使って「いま、何が書かれたか？」をキャッチする仕組みを作ってみましょう。
お買い物メモを例にしてみますね。
ここで使った `blur（ブラー）` というイベントは、「入力欄から外（よそ見）をした瞬間」に発動します。お買い物のメモを書いて、別の場所をクリックした瞬間に「保存完了！」となる……そんな体験が作れるんです。
4. 知っておくと安心な「つまずきポイント」
`contenteditable` は便利ですが、いくつか「あれ？」と戸惑うポイントもあります。
- Enterキーを押すとタグが増える？
`contenteditable` の中でEnterキーを押すと、ブラウザが自動的に `
` を挿入して改行を表現します。CSSで調整しないと、少しレイアウトが崩れることがあるので、「あ、ブラウザが勝手にタグを作ってくれているんだな」と理解しておくと、慌てずに済みますよ。
- 「文字だけ」を受け取りたいとき
コピー＆ペーストで別の場所から文字を貼り付けると、元の場所の「太字」や「色」の情報まで一緒についてきてしまうことがあります。これを防ぐには、JavaScriptで貼り付け時のイベントを制御する必要がありますが、まずは「まずは文字だけ入力できればOK！」というところから始めていきましょう。
まとめ：小さな一歩から「対話的なWeb」へ
`contenteditable` を使うと、Webサイトは「読むだけの本」から「ユーザーと一緒に作るノート」へと進化します。
最初は「文字が書き込める！」という驚きだけで十分です。そこから「保存するにはどうすればいいかな？」「文字の色を変えるボタンも作れるかな？」と、一つずつ知識を積み重ねていけば、きっと素晴らしいWebアプリが作れるようになりますよ。
難しく考えすぎず、まずは自分のPCでコードを書いて、ブラウザでカチカチと文字を打ち換える楽しさを味わってみてくださいね。応援しています！
コメント