インライン編集
テキストをクリック／タップでその場編集に切り替え、Enter または保存ボタンで確定、Esc またはキャンセルで元に戻す。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 設定画面・詳細画面で 1 項目ずつ直したい業務 UI
- 一覧の行内でタイトルや担当を書き換える場面
- 編集フォームへ遷移させたくない短いテキスト
- 避ける場面
- 複数項目をまとめて検証・保存する入力
- 長文や書式付きの本文編集
- 構成要素
- ラベル
- 表示テキスト
- 編集ボタン
- 入力欄
- 保存・キャンセル
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で表示テキスト（button）→編集ボタンへ、Enter／Space で開始。入力中は Enter で確定・Esc で取消。確定・取消後は編集ボタンへ戻る
- 支援技術
表示テキストは button で aria-labelledby に項目名＋現在値。編集ボタンは「〜を編集」の aria-label。入力欄は aria-labelledby で項目名を持ち、開始時にフォーカスし全選択。終了時は編集ボタンへ戻す
- 動き
表示テキストの下線・ボタン色 150ms。切替自体はアニメ無し
原則認知負荷
デザインの要点
- 表示テキスト自体を button にする。span にクリックを付けると Tab で辿り着けず、編集できる人が限られる
- ホバーで破線の下線を出して「押せる」を予告する。常時出すと入力欄に見え、出さないと発見できない
- 開始時に入力欄へフォーカスして全選択する。カーソルが末尾に置かれると打ち直しに Backspace 連打が要る
- 確定・取消後は編集ボタンへフォーカスを戻す。入力欄が消えた瞬間にフォーカスが body へ落ちると位置を見失う
コード（コピーして使えます）
<div class="ie-card">
<p class="ie-label" id="ie-label-1">プロジェクト名</p>
<div class="ie-field">
<button class="ie-display" id="ie-display-1" type="button" aria-labelledby="ie-label-1 ie-display-1">新規プロジェクト α</button>
<div class="ie-form hidden" id="ie-form-1">
<input class="ie-input" id="ie-input-1" type="text" aria-labelledby="ie-label-1" />
<div class="ie-actions">
<button class="ie-btn-save" id="ie-save-1">保存</button>
<button class="ie-btn-cancel" id="ie-cancel-1">キャンセル</button>
</div>
</div>
<button class="ie-edit-btn" id="ie-edit-1" aria-label="プロジェクト名を編集">✎</button>
</div>
<p class="ie-label" id="ie-label-2" style="margin-top:16px">担当者</p>
<div class="ie-field">
<button class="ie-display" id="ie-display-2" type="button" aria-labelledby="ie-label-2 ie-display-2">田中 一郎</button>
<div class="ie-form hidden" id="ie-form-2">
<input class="ie-input" id="ie-input-2" type="text" aria-labelledby="ie-label-2" />
<div class="ie-actions">
<button class="ie-btn-save" id="ie-save-2">保存</button>
<button class="ie-btn-cancel" id="ie-cancel-2">キャンセル</button>
</div>
</div>
<button class="ie-edit-btn" id="ie-edit-2" aria-label="担当者を編集">✎</button>
</div>
<p class="ie-hint">テキストをクリックして編集</p>
</div>