やってみようタイトルの文字を押して書き換え、Enter か欄の外を押してください
入力フォームマイナー（知る人ぞ知る）
その場で編集（インライン編集）
Inline Editing
文字を押すと、その場で入力欄に変わって書き換えられる。別の編集画面に移らない。
別名インライン編集クリックして編集その場編集直接編集
どこで使われている？
- よく見かける場所
- Notion・Trello などのタイトル、表計算、ファイル名の変更、管理画面の表
- 使うとよい場面
- 短い文字をすぐ直したいとき（タイトル、名前、数字など）
- 避けたい場面
- 入力項目がたくさんあるとき（まとめて編集できる画面の方がよい）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「その場で編集（インライン編集）（Inline Editing）」を実装してください。 動き：表示中の文字を押すと、同じ位置・同じ大きさの入力欄に切り替え、文字を全部選んだ状態にする。Enter か欄の外を押すと保存して表示に戻し、Esc で取り消す。 使う部品：クリックで表示用の要素と input を切り替える（contenteditable でも可）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | クリックで表示用の要素と input を切り替える（contenteditable でも可） |
|---|---|
| iPhoneアプリなら | Text と TextField を状態で切り替える |
| Androidアプリなら | Text と BasicTextField を状態で切り替える |
| Flutterなら | Text と TextField を状態で切り替える |
| React Nativeなら | Text と TextInput を状態で切り替える |