インラインエディット Inline Edit
テキストをクリックするとその場で編集可能になるコンポーネント。
ライブデモ
プロジェクト名
新規プロジェクト
担当者
山田太郎
ステータス
進行中
ソースコード
<div class="demo-inlineedit">
<div class="demo-inlineedit-item">
<span class="demo-inlineedit-label">プロジェクト名</span>
<div class="demo-inlineedit-field" data-field="project">
<span class="demo-inlineedit-value">新規プロジェクト</span>
<input class="demo-inlineedit-input" type="text" />
<span class="demo-inlineedit-icon">✎</span>
</div>
</div>
<div class="demo-inlineedit-item">
<span class="demo-inlineedit-label">担当者</span>
<div class="demo-inlineedit-field" data-field="owner">
<span class="demo-inlineedit-value">山田太郎</span>
<input class="demo-inlineedit-input" type="text" />
<span class="demo-inlineedit-icon">✎</span>
</div>
</div>
<div class="demo-inlineedit-item">
<span class="demo-inlineedit-label">ステータス</span>
<div class="demo-inlineedit-field" data-field="status">
<span class="demo-inlineedit-value">進行中</span>
<input class="demo-inlineedit-input" type="text" />
<span class="demo-inlineedit-icon">✎</span>
</div>
</div>
</div>.demo-inlineedit { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.demo-inlineedit-item { display: flex; flex-direction: column; gap: 4px; }
.demo-inlineedit-label { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
.demo-inlineedit-field {
display: flex; align-items: center; gap: 6px; padding: 6px 10px;
border-radius: 6px; cursor: pointer;
border: 1px solid transparent; transition: all 0.2s;
}
.demo-inlineedit-field:hover {
background: color-mix(in srgb, var(--ui-primary) 5%, transparent);
border-color: color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-inlineedit-value { font-size: 14px; color: #333; flex: 1; }
.demo-inlineedit-icon { font-size: 12px; color: #9ca3af; opacity: 0; transition: opacity 0.2s; }
.demo-inlineedit-field:hover .demo-inlineedit-icon { opacity: 1; color: var(--ui-primary); }
.demo-inlineedit-input {
display: none; flex: 1; padding: 4px 8px; border: 2px solid var(--ui-primary);
border-radius: 6px; font-size: 14px; outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-inlineedit-field.editing { border-color: transparent; background: none; cursor: default; }
.demo-inlineedit-field.editing .demo-inlineedit-value { display: none; }
.demo-inlineedit-field.editing .demo-inlineedit-input { display: block; }
.demo-inlineedit-field.editing .demo-inlineedit-icon { display: none; }
.demo-inlineedit-field.saved { animation: demo-inlineedit-flash 0.6s ease; }
@keyframes demo-inlineedit-flash {
0% { background: color-mix(in srgb, var(--ui-primary) 20%, transparent); }
100% { background: transparent; }
}(function(){
document.querySelectorAll('.demo-inlineedit-field').forEach(function(field) {
var value = field.querySelector('.demo-inlineedit-value');
var input = field.querySelector('.demo-inlineedit-input');
field.addEventListener('click', function() {
if (field.classList.contains('editing')) return;
field.classList.add('editing');
input.value = value.textContent;
input.focus();
input.select();
});
function save() {
var newVal = input.value.trim();
if (newVal) value.textContent = newVal;
field.classList.remove('editing');
field.classList.add('saved');
setTimeout(function(){ field.classList.remove('saved'); }, 600);
}
input.addEventListener('blur', save);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') { e.preventDefault(); save(); }
if (e.key === 'Escape') { field.classList.remove('editing'); }
});
});
})();AIプロンプト
Basic
インラインエディットをHTML/CSS/JSで作ってください。テキストをクリックするとその場で編集可能になります。
Custom
以下の仕様でインラインエディットを実装してください。 - テキストクリックで入力フィールドに切り替え - Enter で保存、Escape でキャンセル - プライマリカラー: #2563eb - ホバー時に編集アイコン表示 - 保存時のフラッシュアニメーション - blur時に自動保存 - 編集中はフィールドにフォーカスリング表示
Advanced
アクセシビリティ対応のインラインエディットを実装してください。 - role="button" + aria-label で編集可能であることを通知 - 編集モードへの切り替えを aria-live で通知 - フォーカス管理（編集開始時にinputにフォーカス） - バリデーションエラー時の aria-invalid + aria-describedby - Undo/Redo対応（Ctrl+Z / Ctrl+Shift+Z） - オプティミスティックUIの実装（保存中の表示状態管理） - キーボードのみで完全操作可能 - スクリーンリーダーで変更内容の読み上げ