コンテキストメニュー Context Menu
右クリックやロングタップで表示されるメニュー。要素に対する操作を提供する。
ライブデモ
この領域内で右クリック（またはボタンクリック）するとコンテキストメニューが表示されます。
ソースコード
<div class="demo-context-area" tabindex="0">
<p>この領域内で右クリック（またはボタンクリック）するとコンテキストメニューが表示されます。</p>
<button class="demo-context-trigger">メニューを表示</button>
<div class="demo-context-menu" style="display:none;" role="menu">
<button class="demo-context-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
コピー
<span class="demo-context-shortcut">Ctrl+C</span>
</button>
<button class="demo-context-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
貼り付け
<span class="demo-context-shortcut">Ctrl+V</span>
</button>
<div class="demo-context-divider"></div>
<button class="demo-context-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
編集
</button>
<button class="demo-context-item danger" role="menuitem">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
削除
</button>
</div>
</div>.demo-context-area { position: relative; min-height: 250px;
border: 2px dashed #d1d5db; border-radius: 12px;
padding: 24px; text-align: center; position: relative;
min-height: 120px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 12px;
}
.demo-context-area p { font-size: 13px; color: #666; margin: 0; }
.demo-context-trigger {
padding: 6px 14px; background: var(--ui-primary); color: #fff;
border: none; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.demo-context-menu {
position: absolute; background: #fff; border: 1px solid #e5e7eb;
border-radius: 10px; padding: 4px; min-width: 180px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100;
}
.demo-context-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 12px; border: none; background: none;
font-size: 13px; color: #333; cursor: pointer; border-radius: 6px;
text-align: left;
}
.demo-context-item:hover { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); color: var(--ui-primary); }
.demo-context-item.danger:hover { background: #fef2f2; color: #ef4444; }
.demo-context-shortcut { margin-left: auto; font-size: 11px; color: #999; }
.demo-context-divider { height: 1px; background: #e5e7eb; margin: 4px 0; }(function(){
var area = document.querySelector('.demo-context-area');
var menu = document.querySelector('.demo-context-menu');
var trigger = document.querySelector('.demo-context-trigger');
if(!area||!menu) return;
function show(e) {
var rect = area.getBoundingClientRect();
var x = (e.clientX||e.pageX) - rect.left;
var y = (e.clientY||e.pageY) - rect.top;
x = Math.max(0, Math.min(x, rect.width - 180));
y = Math.max(0, Math.min(y, rect.height - 160));
menu.style.display = 'block';
menu.style.left = x + 'px';
menu.style.top = y + 'px';
}
function hide() { menu.style.display = 'none'; }
area.addEventListener('contextmenu', function(e) { e.preventDefault(); show(e); });
if(trigger) trigger.addEventListener('click', function(e) { e.stopPropagation(); show(e); });
document.addEventListener('click', function(e) { if(!menu.contains(e.target)) hide(); });
menu.querySelectorAll('.demo-context-item').forEach(function(item) {
item.addEventListener('click', hide);
});
})();AIプロンプト
Basic
コンテキストメニューをHTML/CSS/JSで作ってください。右クリックで表示されるメニューです。
Custom
以下の仕様でコンテキストメニューを実装してください。 - 右クリックまたはボタンクリックで表示 - プライマリカラー: #2563eb - アイコン + テキスト + ショートカット表示 - セパレーター（区切り線） - 危険な操作は赤色表示 - フェードインアニメーション - 画面端での位置調整
Advanced
高機能コンテキストメニューを実装してください。 - サブメニュー（ネスト）対応 - role="menu" + role="menuitem" の適切な使用 - キーボードナビゲーション（上下キーで移動、Enter確定、ESC閉じる） - 先頭文字での検索ジャンプ - 動的メニュー項目（状態に応じて変化） - 無効化項目（aria-disabled） - チェック付き項目（role="menuitemcheckbox"） - タッチデバイスでのロングタップ対応 - Portal レンダリング（overflow問題回避） - アニメーションはprefers-reduced-motion対応